构造函数、原型对象、实例对象关系及原型链

总结

function Person() {}

Person.protoType.name ='zs'
let person = new Person()
console.log(person.name) // 'zs' // 从对象本身找不到name属性,会从实例对象上去找

Person(构造函数)--protoType-->原型对象--constructor-->Person
person(实例对象)--__proto__-->原型对象--__proto__-->原型对象的原型对象-->-->null (原型链)

原型链

function Person (name, age) {
  this.name = name;
  this.age = age;
}

var p1 = new Person();

console.log(Person.prototype) // 指向Person的原型对象
console.log(Person.prototype.__proto__.constructor) // 我们可以看到Person的原型对象是Object的实例

js中对象属性的查找规则

因为这个查找规则,所以Object函数原型对象上的所有属性都可以被其他对象访问到

• 访问对象的属性时,先在对象自己身上找,找到就直接返回
• 如果对象的身上没有这个属性,就会往原型上面找,如果找到就直接返回
• 如果原型上也没有,就往原型的原型上面找(沿着原型链一直往上找),找到就立即返回
• 如果最终都没有找到,则返回undefined

function Student(){}
var s1 = new Student();
s1.toString()  //[object Object]  

内置对象的原型

• Array.prototype

• String.prototype

  …

  通过观察内置函数的原型,数组/字符串常用的API,其实都定义在他们对应的原型上的.所以所有的数组对象/字符串,都能使用这些API.

更简单的原型使用方式

直接新建一个对象赋值给函数的prototype属性

function Person (name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype = {
  constructor: Person, // => 手动定义一个 constructor 属性, 指向正确的构造函数
  sayHello: function () {
    console.log('我叫' + this.name + '，我今年' + this.age + '岁了');
  }
  eat : function(){
    console.log('吃饭ing...');
  }
}

var p1 = new Person('zs', 18);

instanceof

instanceof作用
判断一个函数的原型对象,是否在实例对象的原型链上

var arr = [];
console.log(arr instanceof Array); //true
console.log(arr instanceof Object);  //true

原型链不可变

function Person(){
}
var p1 = new Person();
console.log(p1 instanceof Person); // ?

Person.prototype = {
    constructor : Person,
    a : 1
}
console.log(p1 instanceof Person); // ?
var p2 = new Person();
console.log(p2 instanceof Person); // ?