JS原型与原型链

JS原型与原型链

背景介绍

1.构造函数

构造函数，是一种特殊的方法。主要用来在创建对象时初始化对象。每个构造函数都有prototype(原型)属性

    function Person(name,age,gender){
        this.name = name;
        this.age = age;
        this.gender = gender;
        this.say = function(){
            alert(this.name);
        }
    }
    var person1 = new Person('张三',23,'男');
    var person2 = new Person('李四',34,'女');
    console.log(person1);
    console.log(person2);

2.原型模式

每个函数都有prototype(原型)属性,这个属性是一个指针，指向一个对象，这个对象的用途是包含特定类型的所有实例共享的属相和方法，即这个原型对象是用来给实例共享属性和方法的。

而每个实例内部都有一个指向原型对象的指针。

    function Person(){
        
    }
    Person.prototype.name = '张三';
    Person.prototype.age = 23;
    Person.prototype.gender = '男';
    var person1 = new Person();
    console.log(person1);
    //简写模式
    Person.prototype={
        constructor:Person
        name:"张三",
        age:23,
        gender:'男'
    }

注意:每个原型对象都有constructor属性，由于简写模式重写了默认的prototype对象，所以constructor也会被重新定，不能在指向他的构造函数，所以可以自己写一个constructor属性指向他的构造函数

3.原型链

每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含指向原型对象内部的指针。我们让原型对象的实例（1）等于另一个原型对象（2），此时原型对象（2）将包含一个指向原型对象（1）的指针，再让原型对象（2）的实例等于原型对象（3），如此层层递进就构成了实例和原型的链条，这就是原型链的概念。

    function One(){
        
    }
    function Two(){
        
    }
    function Three(){
        
    }
    Two.prototype=new One();
    Three.prototype=new Two();
    var three = new Three();
    console.log(three);
    console.log(three.__proto__===Three.prototype)//true
    console.log(three.__proto__.__proto__===Two.prototype)//true
    console.log(three.__proto__.__proto__.__proto__===One.prototype)//true
    console.log(three.__proto__.__proto__.__proto__.__proto__===Object.prototype)//true

在对象实例中，访问对象原型的方法

• 1.使用proto属性
• 2.Object.getPrototypeOf
• 3.使用constructor.prototype的方法

总结

原型与原型链

原型

1. 每个函数|类都有一个显示原型prototype
2. 每个实例都有一个隐式原型__proto__
3. 实例的隐式原型__proto__等于对应函数|类的显示原型

原型链

• 当获取对象的属性|方法时，先在自身对象上查找，找不到则向上查找隐式元素__proto__直到__proto__为null为止
• 把由__proto__组成的链条关系称为原型链
• js对象通过__proto__原型链实现了继承