一篇文章彻底搞定js原型链

2019-12-22  本文已影响0人  2c半度虚华

首先我们创造一个构造函数


  function Person(){

  }
  console.log(typeof Person); //function
  var person=new Person();
  console.log(typeof person); //object

Person是一个构造函数,我们可以通过new得到一个对象person,他们之间通过prototype和constructor进行连接,其中prototype是函数才有的属性,每一个实例原型都有一个constructor。最后每一个JS对象都会有一个属性叫proto,这个属性会指向对象的实例原型。


function Person() {

}
// 虽然写在注释里,但是你要注意:
// prototype是函数才会有的属性
Person.prototype.name = 'Kevin';
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // Kevin
console.log(person2.name) // Kevin

console.log(Person === Person.prototype.constructor); // true
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true

通过上面的代码可以知道如下流程


关系图

)

function Person() {

}

Person.prototype.name = 'Kevin';

var person = new Person();

person.name = 'Daisy';
console.log(person.name) // Daisy

delete person.name;
console.log(person.name) // Kevin

另外,通过上面的代码我们可以知道当我们删除了 person 的 name 属性时,读取 person.name,从 person 对象中找不到 name 属性就会从 person 的原型也就是 person.proto ,也就是 Person.prototype中查找,幸运的是我们找到了 name 属性,结果为 Kevin。

最后这些只是我个人的理解,有错误希望能有所体谅,希望我的文章能对各位会有所帮助。。。

上一篇 下一篇

猜你喜欢

热点阅读