新风格网站,做文学网站需要,制作一个.net网站需要,做网站是要云空间吗快速理解JS中的原型和原型链 在我们学习JS的过程中#xff0c;我们总会接触到一些词#xff1a;“原型”#xff0c;“原型链”。那么今天我就来带大家来学习学习原型和原型链的知识吧#xff01; 在开始之前#xff0c;我们明确一下我们接下来想要学习的目标#xff1a…快速理解JS中的原型和原型链 在我们学习JS的过程中我们总会接触到一些词“原型”“原型链”。那么今天我就来带大家来学习学习原型和原型链的知识吧 在开始之前我们明确一下我们接下来想要学习的目标 什么是原型什么是原型链原型和原型链之间有什么关系原型和原型链有什么作用 原型 什么是原型呢每个构造函数创建的对象都会在创建的时候自带(创建)一个 prototype 属性这个属性是一个对象这个对象就是我们要说的原型。是不是有点绕来看下面这个例子 function Person(){} Person.prototype.namezhangsan Person.prototype.sayNamefunction(){console.log(lisi) }const p1 new Person() console.log(p1.name)//zhangsan console.log(p1.__proto__)// {name:zhnagsan} console.log(p1.constructor)// [Function: Person] console.log(Person.prototypep1.__proto__)// true console.log(Person.prototype.contructorPerson)// true从这个例子可以看出p1 是构造函数Peron()的实例对象而实例对象通过__proto__和Person的prototype 属性连接起来了。看到这里你是不是还是很疑惑它们两个怎么就连接起来了这就需要了解一下下面的知识点了 构造函数通常会有两个原型对象一个是隐式原型__proto__一个是显示原型prototype。而隐式原型是每一个对象都会拥有的。原型的一个作用大致可以理解成作为实例对象和构造函数之间的桥梁但是请注意实例对象与构造函数原型有直接联系但是实例对象和构造函数之间没有直接联系使用原型对象的还有一个好处是在它上面定义的属性和方法可以被对象实例共享。也就是Person.prototype上面的属性和方法都会共享给实例对象而且一个原型对象可以有多个实例的指向。Person.prototype是 Person 构造函数的原型p1.__proto__是实例对象 p1 的隐式原型通过隐式原型可以访问对象的原型如上所述构造函数有一个prototype属性引用其原型对象而这个原型对象也有一个constructor属性引用这个构造函数。也就是两者相互循环引用。 原型链 看完了上面内容相信你已经对原型已经有了大概的了解接下来我们进阶了解一下原型链吧。看完上面的内容其实就很好理解原型链了我们知道在使用实例对象的时候可以使用一些方法像 toString、valueOf等但是我们并没有在实例对象中定义这些方法那这些方法是那里来的呢实际上这些方法都是实际对象通过原型链到Object那里“拿”的。当我们调用一个对象中没有定义的方法时JS 引擎会沿着原型链向上查找直到找到该方法或达到原型链的顶端。(原型链也就是上图中右边一直向上“链条)。 这时候就会有人问那么 JS 引擎是怎么利用原型链搜索的呢请看下面的例子 function Peronson(){} Person.prototype.namezhangsanconst p1new Person(); console.log(p1.name)// zhangsan p1.namelisi console.log(p1.name)// lisiJS 引擎在第一次打印的时候会问 p1 实例有 name 属性吗答案是没有。然后继续搜索并问p1 的原型有 name 属性吗答案是有的于是就返回了保存在原型上的这个 name 属性。第二次打印的时候 JS 引擎会问 p1 实例有 name 属性吗答案是有的于是就返回了保存在实例上的这个 name 属性。 实际上在第二次打印的时候p1原型上的 name 属性已经被 p1 实例的 name 属性给遮蔽了也就是说虽然不会修改它但会屏蔽它对原型上的同名属性。即时在实例上把这个属性设置为 null也不会恢复它和原型的联系。不过使用 delete 操作符可以完全删除实例上的这个属性从而让标识符解析过程能够继续搜索原型对象。 function Peronson(){} Person.prototype.namezhangsanconst p1new Person(); console.log(p1.name)// zhangsan p1.namelisi console.log(p1.name)// lisi delete p1.name console.log(p1.name)// zhangsanhasOwnProperty方法用于确定某个属性是在实例上还是在原型对象上会在属性存在与掉用它的对象实例上时返回 true function Person(){}const p1new Person(); console.log(p1.name)// zhangsan来自原型 console.log(p1.hasOwnProperty(name))// false p1.namelisi console.log(p1.name)// lisi来自实例 console.log(p1.hasOwnProperty(name))// true有人会说这仅仅只是一个实例和其构造函数的原型链那更复杂应该是什么样的呢大家不妨想想如果原型是另一个类型的示例呢那就意味着这个原型本身有一个内部指针指向另一个原型相应地另一个原型也有一个指针指向另一个构造函数。这样就在实例和原型之间构造了一条原型链。 function SuperType() {this.property true }SuperType.prototype.getSuperValue function () {return this.property }function SubType() {this.subproperty false }SubType.prototype new SuperType()SubType.prototype.getSubValue function () {return this.subproperty }let instance new SubType() console.log(instance.getSuperValue()) // true 这里SuperType的实例作为SubType原型的一个属性那么SuperType原型上的方法都会被SubType的示例所继承这个例子就能够很好的体现出什么原型链和原型链的作用。 到这里我们已经对原型有了大概的认识那接下来我们来尝试一下回答上开头提出的几个问题 什么是原型 JS 中所有的对象都有一个内置属性称为它的 prototype(原型) - MDN 什么是原型链 原型本身是一个对象故原型对象也会有它自己的原型逐渐构成了原型链。原型链终止于拥有 null 作为其原型的对象上(内置一个_proto_ 属性并指向其构造函数的prototype的对象就是原型) - MDN。 原型和原型链之间有什么关系 原型链由一个或多个原型链的指向形成的 原型和原型链有什么作用 JS的属性共享和继承机制(当然属性共享在某些场景下也是它的问题所在)