一篇文章读懂JS原型和原型链

2022-12-28 0 589

序言

晚安! 热烈欢迎写作第一集该文,那时我即将用一则该文带你深入细致认知JavaScript中的蓝本和蓝本链,让他们一同掀开蓝本谜样的复试,一同探知当中的奥秘。

所有人皆是第一类

看见那个副标题你可能将就有你可能将就有疑点了,是不是这篇该文一已经开始要是说实话了,接着预备要停用这篇这篇该文。喽、除此外,接下去瞧瞧他们细细掰扯掰扯这句话

“所有人皆是第一类”是要说,在我看来你怎样认知那个“第一类”那个基本概念。这句话的重点项目也是此。

在认知第一类以后,他们先提及两个他们的老友 typeof ,坚信许多后端的老师都假如晓得那个JavaScript的常见操作符,假如你不晓得,请先对上面文本。

他们都晓得 typeof 能推论两个表达式的类别,codice共计呵呵三种( undefined、number、string、boolean、function、object、Symbol )当中 Symbol 是 ES6 导入的新类别。

function test() { var x; console.log(typeof x) //undefined console.log(typeof 100) //number console.log(typeof typeof) //string console.log(typeof true) //boolean console.log(typeof [1,2,3,4]) //object console.log(typeof {a:1,b:2})//object console.log(typeof null) //object null在这里为空第一类(注意) console.log(typeof new Number(100)) //object console.log(typeof function(){}) //function }

上面代码列出的是 typeof 返回的三种值,当中代码前四种是值类别,余下的三种情况都是提及类别,他们也都是第一类。关于提及类型和值类别的区别请看他们另一则该文值类别和提及类别.

第一类是若干属性的集合,第一类里面的所有人都是属性,都是以键值对的形式出现,当中方法也是一种特殊的属性。属性的值也能是两个第一类(禁止套娃qAq)第一类能用instanceof推论,记住所有人(应用类别)都是第一类,第一类是属性的集合,所有人第一类都是通过函数来创建的

蓝本知多少

说到蓝本他们就不得不说 prototype 他们晓得每个函数都有两个 prototype (蓝本)属性,那个属性是两个指针,指向两个第一类,而那个第一类的用途是包含能由特定类别的所有实例共享的属性和方法。我放了两张图片帮你认知(qwq)

一篇文章读懂JS原型和原型链

上图SuperType是函数,他的蓝本就是SuperType Prototype,蓝本的constructor属性指向它的构造函数SuperType

一篇文章读懂JS原型和原型链

上图是第一类的Object的以及它的蓝本,他们能看见蓝本上有许多他们常见的属性和方法,应为所有人第一类的蓝本都直接或间接的指向了它,因此能使用上面的方法。

上面说到每两个函数都有自己的prototype,也就是蓝本,那么通过 new 生成的函数实例呢?这里就不禁要疑点了,其实每个new出来的实例,以及每两个第一类都有两个__proto__,即隐式蓝本。

一篇文章读懂JS原型和原型链

上面图片显示了第一类obj的__proto__属性,上面我再放一张Object的prototype

一篇文章读懂JS原型和原型链

从上面的截图看出,obj.

proto__和Object.prototype是一样的

他们用一张图表示。
一篇文章读懂JS原型和原型链

从图中他们得知每个第一类都有都有两个__proto,并且指向该第一类函数的prototype。

唯一的特例Object.prototype的__proto__指向的是null

还有就是,函数也是第一类,函数也有两个__proto__,指向Function.prototype,函数是由Function创建出来的,而Function又被自身创建。

var foo = new Function(“x”,“y”,“return x+y”)

就是这样,建议不要这样创建函数

蓝本链和继承

上面用一张详细的图,请先对,他们根据这张图讲解蓝本链

一篇文章读懂JS原型和原型链

要说起蓝本链,他们不得不用到两个工具instanceof,对于提及类别,他们想要晓得提及类别的具体是数组还是第一类,要是用到那个工具。如下所示

function Foo(){} var f1 = new Foo() console.log(foo instanceof Foo) //true console.log(foo instanceof Object) //true

结合上图他们他们来看看,instanceof操作符的规则就是,实例foo沿着__proto__这条线,同时Foo沿着prototype这条线来找,假如这两条线找到了同两个第一类,那么就返回true,否则就返回false, instanceof表示一种继承关系,或者蓝本链的结构

JavaScript是通过蓝本链的方式来实现继承的,又被称作为蓝本链第一类继承,对于两个第一类,它能访问它蓝本第一类的属性。同理,蓝本第一类也是两个属性,它也有自己的蓝本,因此也能继承它蓝本第一类蓝本的属性。

访问两个第一类的属性时,现在基本的第一类内找,假如找不到,就沿着__proto__这条链向上找。

三种常见的继承方式

组合继承

组合继承(combination inheritance),有时候也叫做伪经典继承,指的是将蓝本链和借用构造函数的

技术组合到一块,从而发挥二者之长的一种继承模式。其背后的思路是使用蓝本链实现对蓝本属性和方

法的继承,而通过借用构造函数来实现对实例属性的继承。这样,既通过在蓝本上定义方法实现了函数

复用,又能够保证每个实例都有它自己的属性。上面来看两个例子

function SuperType(name){ this.name = name; this.colors = [“red”, “blue”, “green”]; } SuperType.prototype.sayName = function(){ alert(this.name); }; function SubType(name, age){ //继承属性 SuperType.call(this, name); this.age = age; } //继承方法 SubType.prototype = newSuperType(); SubType.prototype.constructor = SubType; SubType.prototype.sayAge =function(){ alert(this.age); }; var instance1 = new SubType(“Nicholas”, 29); instance1.colors.push(“black”); alert(instance1.colors);//”red,blue,green,black” instance1.sayName(); //”Nicholas”; instance1.sayAge(); //29 var instance2 = new SubType(“Greg”, 27); alert(instance2.colors); //”red,blue,green”instance2.sayName();//”Greg”; instance2.sayAge(); //27

ES6中继承

ES6是通过class实现了类,通过extends实现了标准化继承,然而,class、extends本质上还是语法糖,通过bable能将其转译为ES5代码执行。

ES6中的class、extends使用的是ES5中寄生组合继承,并对寄生组合继承作出了呵呵优化,如下所示

ES6中继承使用Object.create()以SuperClass的蓝本第一类创建了两个新的蓝本第一类,即SubClass.prototype.proto = SuperClass.prototype。 同时使其constructor属性指向SubClass。

ES5的继承是子类的蓝本第一类__proto__属性指向父类的蓝本第一类,而ES6中继承是子类__proto__指向父类。

写在最后

在整理和书写是难免出现错误,假如你看见这里,发现原文有错误的地方,或者有什么想要分享的,也热烈欢迎在评论区留言,一老师习,加油,奥利给

一篇文章读懂JS原型和原型链

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务