包含javascript套娃的词条

instanceof js怎么实现的

function Animal () {}

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名注册、网络空间、营销软件、网站建设、海城网站维护、网站推广。

function Person(){}

Person.prototype = new Animal();

var p = new Person();

p instanceof Animal; // 返回true

要理解上述instanceof的机制，首先要理解一些js中的基本概念以及对象的内存组织形式

prototype对象（原型对象）

JavaScript中并没有真正的类。但这并不意味着JS中对象没有类型，没有继承。JS使用的是一种简单的内存复用对象的方式来实现继承 --- 称之为【原型继承】

给定任意一个对象，我们如何获取它的原型呢？或者问我们如何得知这个对象是复用了哪个原型对象呢？

方法如下：

var obj = {};

// 标准的现代浏览器

Object.getPrototypeOf(obj);

// 老版本的IE浏览器

obj.__proto__

我们可以这样理解JS中是如何利用原型对象来实现内存复用的。

obj - prototype

任意一个对象obj，它都引用着一个prototype对象

当你试图访问obj的某个属性或者方法的时候，JS解释器首先从obj自身上找是否有这么一个属性，如果有就返回，如果没有，那就去查看obj的原型对象（prototype）上是否存在。如果有就返回。那么问题来了，如果prototype上也没有的话，是否就会返回undefined呢？

这就引出了另一个重要的概念，【原型链】

原型链

原型链是指，一个对象的原型对象，可能引用了其他的原型，就好像俄罗斯套娃，一层套一层。其实这也是很容易理解的。如果C对象想要复用A对象和B对象中的属性和方法，最简单而且节约空间的方法，就是先让B复用A（反之亦可），然后再让C复用B。这样C就同时拥有A和B中的属性和方法了。这时候，B是C的原型对象，A是B的原型对象。这样就行程了一个引用链：C - B - A。其中B - A这一段，我们称之为对象C的原型链。一个对象的原型链可能不存在，也可能是一个或者多个原型对象连接而成。

什么对象会没有原型呢？答案就是Object.prototype，因为对象总要有根源的，一切对象都来自于Object.prototype。就好比上帝之外无上帝一样，Object.prototype的原型是null。

“类”

之所以这里的“类”打了引号，就是因为JS中实际上并没有真正的类这种概念，单纯是一种数据结构。尽管如此我们还是要说明一下JS中的类（后面为了方便就不再用引号了）。一个类的声明跟定义一个方法是一样的。例如声明一个类 -- Animal

function Animal () {}

之前提到过JS中没有类继承，而是通过一种叫做原型继承的方法，那原型对象在那呢？答案是在类上

Animal.prototype.eat = function () {...};

那怎么体现这个函数是类而跟一般的函数不同呢？答案就是当使用new的时候

var animal = new Animal();

当使用new关键字的时候，Animal就不再是一个普通的函数。JS会创建一个空对象，并且把Animal.prototype作为原型对象链接到这个空对象中。这个刚刚创建的空对象会作为函数执行的上下文对象，也就是this对象。如果学过面向对象的人马上就会反应到，这个时候这个函数已经不再是一个普通的函数，而是一个构造函数。

是的，而且js中的确有构造函数的概念。

animal.constructor === Animal // 返回true，说明animal的构造函数就是当初new的那个函数

知道了什么是原型、原型链以及类之后，我们就可以探讨一下instanceof是如何实现的了。

实际上，instanceof做的事情很简单。判断一个表达式a instanceof ClassA是否为真，就是判断ClassA.prototype是否在对象a的原型链上。只要ClassA的原型对象存在于对象a的原型链上，那就说明a对象复用了ClassA.prototype，那么我们也就可以说a是ClassA的一个实例。instanceof返回true。

可用重写一下开头的例子来印证一下上述说法

function Animal () {}

function Person(){}

Person.prototype = new Animal();

var p = new Person();

console.log(p instanceof Animal); // 返回true

console.log(p instanceof Person); // 返回true

// 以上两个都返回true很容易理解，因为Animal.prototype和Person.prototype都在p的原型链上

// 此时我们把Person.prototype重置为新的Animal对象

Person.prototype = new Animal();

console.log(p instanceof Animal); // 返回true

console.log(p instanceof Person); // 返回false

为什么最后一个会返回false呢？原因别忘了，判断的是Person.prototype是否在p的原型链上。因为之前我们故意把Person.prototype = new Animal();，相当于把Person.prototype换了一个新的Animal对象。这个时候，比较显然就不相等了。因此返回false

还是举例说明

var a1 = new Animal();

var a2 = new Animal();

console.log(a1 === a2); // 返回false，因为虽然都是Animal对象，但是确实两个不同的实例

想尝鲜Windows 11？只要一个浏览器就可以

前段时间，Windows 11预览版泄漏的安装包，让喜欢“搞机”的IT爱好者们纷纷行动了起来。小黑在之前的文章《Win11泄漏版尝鲜，实际体验告诉你值不值得更新？》中，也详细介绍了Windows 11目前的实际体验。

不过，预览版系统并不适合安装在用户的主力电脑上，因此这些用户也就无法第一时间体验下一代Windows操作系统了。

另外，由于微软的限制，一些用户的电脑配置不足以满足Windows 11的最低要求，对他们来说，Windows 11究竟是什么样的，也就无法亲身体验了。

一个令人惊叹的想法：用网页打开Windows 11

为了让那些暂时无法用上Windows 11的用户也能体验最新的Windows系统，一位名叫Blue edge的技术大神用React语言1:1复刻了一个网页版的Windows 11。用户只要在浏览器中打开链接，就能看到Windows 11那熟悉而又陌生的界面了。

该网页的链接是：，有兴趣的小伙伴可以体验一番。

根据小黑的亲自体验，这个在网页上的Windows 11在很多方面与Windows 11的预览版非常相似， 不论是特效还是动画，都能达到以假乱真的效果。

不过，由于这个“Windows 11”是建立在网页上的，因此时不时会出现操作不流畅的现象。

网页版Windows 11现在能干什么？

上手网页版Windows 11的第一件事，小黑匪夷所思地先将鼠标移动到了Windows窗口中的Word图标，然后点了下去。

嗯，像小黑这么敬业的员工已经不多了吧。

不过，小黑连续点了好几次，都没能打开“心爱的”Word。

不过想想也对，一个网页版“操作系统”，我们不能要求他装下Word这一类庞大的软件。

接着，小黑尝试点击了其他的图标，发现其中不少图标都可以通过点击打开，但大型软件的图标、与文件或系统设定相关的图标则一般无法在网页中打开。

看来，小黑想通过网页版Windows 11办公的企图，终究无法实现了。

但在持续的体验中，小黑发现网页版Windows 11依然有还算丰富的功能， 最大的亮点，就是其内置的Edge浏览器了。

正如上图所示，网页版Windows 11中的Edge浏览器打开后与常规系统中的浏览器界面似乎没有什么区别，并且它还能稳定地访问互联网。

照这样说，那小黑岂不是可以利用网页版Windows 11内置的浏览器无限打开网页版Windows 11，制作自己最爱的无限套娃了？

然而事实告诉小黑：并不能。

无限套娃无法实现

网页版的Windows 11最多只能套一次娃，此后就无法继续套下去了。

不过，即使如此，网页版Windows 11内置浏览器的表现也已经很让小黑吃惊了。

让小黑更吃惊的是，网页版Windows 11内置的浏览器似乎也是开发者制作的简单版本，而不是真正的Edge浏览器。

当然，这一点似乎是不言自明的，因为在网页中是无法安装软件的。因此，当我们在网页版Windows 11中的Edge浏览器里打开必应搜索，网页上会出现“下载Microsoft所推荐的最新浏览器”的弹窗。

能做到这样的程度，小黑对网页版Windows 11的制作者充满了景仰。

当然，在这里的Edge浏览器中，我们无法使用收藏夹、插件、浏览器设置等功能。并且如果要访问多层级的网站，就会自动通过电脑原本的浏览器打开新窗口。

在网页版Windows 11中访问网页，似乎有些多此一举。 但实际上，它还提供了其他一些可用的功能， 例如计算器：

白板：

而对小黑来说，更有用的软件则要数Notepad记事本了。

小黑可以在这里写下各种临时起意的信息——只要点击右上角的关闭按钮，一切就不复存在了。

当然，在这些软件中，我们是无法使用保存、撤回操作等系统级功能的，但可以生成无 历史 记录的内容这一点，小黑还是觉得有些用处的，例如浏览一些私密的网站啦、记录一些激动的情绪啦之类的。这些在事后不希望被任何人看到的内容，通过网页版Windows 11，就可以实现真·无痕操作。

光是做了这些功能还不算什么，开发人员甚至还将Microsoft Store也做了出来。尽管其中的软件一个也点击不了，但这样的细节也已经是很惊人了。

而在网页版Windows 11中还有其他一些功能小黑没有展示，但有兴趣的小伙伴也可以前去一探究竟。

制作网页版Windows 11的大神是何许人也？

根据现有的信息，制作这样一个能在浏览器中“运行”Windows 11的大神，是国外一位名为blueedgetechno的技术人员。

在今年6月底的时候，他在油管上看到了一个利用HTML、CSS和JavaScript这些网页开发工具制作Windows 11界面的视频，由此而生了一个新的灵感： 既然有人已经将界面做出来了，为什么不在已有的基础上做一个预览版，让暂时无法使用Windows 11的用户抢先体验呢？

灵感来源应该是这个视频

于是说干就干，花了十天左右的时间，这个网页版的Windows 11就开发出来了。

果然是行动派才能改变世界。

而在开发的同时，blueedgetechno也将其代码上传到了开源社区GitHub上，让更多用户可以学习并为之增加新的内容。

网页版Windows 11的GitHub页面

而在GitHub页面的QA区，blueedgetechno还回答了这样一个充满乐趣的问题：

人生、宇宙和万物的答案是？

42（该问答出自《银河系漫游指南》）。

看来，blueedgetechno也是一位因为科幻作品而爱上科学，最终在技术上有所成就的大神呢。

值得一提的是，目前网页版Windows 11的文件管理器显示的是Coming Soon，这或许代表着这个网页操作系统将会继续更新，为我们带来更接近Windows 11的功能体验呢。

或许有很多小伙伴会说：花十天时间做一个没什么用的网页，有什么意义呢？

确实，这个网页只有一个功能，那就是让我们提前体验Windows 11，但许多时候，正是这些无用的事情，撑起了很多有用技术的发展。

小黑时常觉得，国内的启蒙教育是否也应该少一些功利主义，多一些激发孩子求知、创造欲的“无用功”，或许我们就能创造更多有趣的产品，“让更多能享受到 科技 的乐趣”。

图源：Pixabay、相关网页截图