189 8069 5689

包含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、相关网页截图


网站名称:包含javascript套娃的词条
分享地址:http://cdxtjz.cn/article/dsddjch.html

其他资讯