原型 原型链 继承

 

 

1. prototype属性

prototype 存在于构造函数中 (其实任意函数中都有，只是不是构造函数的时候prototype我们不关注而已) ，他指向了这个构造函数的原型对象。

2.constructor属性

 constructor属性存在于原型对象中，他指向了构造函数

3.__proto__ 属性(注意：左右各是2个下划线)

用构造方法创建一个新的对象之后，这个对象中默认会有一个属性__proto__, 这个属性就指向了构造方法的原型对象。

原型（对象属性）

Javascript规定，每一个函数都有一个prototype对象属性，指向另一个对象（原型链上面的）。

prototype(对象属性)的所有属性和方法，都会被构造函数的实例继承。这意味着，我们可以把那些不变(公用)的属性和方法，直接定义在prototype对象属性上。

prototype就是调用构造函数所创建的那个实例对象的原型（proto）。

prototype可以让所有对象实例共享它所包含的属性和方法。也就是说，不必在构造函数中定义对象信息，而是可以直接将这些信息添加到原型中。

原型链 （JS原型与原型链继承）

实例对象与原型之间的连接，叫做原型链。proto( 隐式连接 )

JS在创建对象的时候，都有一个叫做proto的内置属性，用于指向创建它的函数对象的原型对象prototype。

内部原型(proto)和构造器的原型（prototype）

1、每个对象都有一个proto属性,原型链上的对象正是依靠这个属性连结在一起

2、作为一个对象，当你访问其中的一个属性或方法的时候，如果这个对象中没有这个 方法或属性，那么Javascript引擎将会访问这个对象的proto属性所指向上一个对 象，并在那个对象中查找指定的方法或属性，如果不能找到，那就会继续通过那个对象 的proto属性指向的对象进行向上查找，直到这个链表结束。

JS 在创建对象（不论是普通对象还是函数对象）的时候，都有一个叫做 __proto__ 的内置属性，用于指向创建它的构造函数的原型对象。

根据前面的例子我们很清楚，obj是通过new Object 构造出来的一个对象，那我们Object的原型对象就是Object.prototype，在Object下面构造出来的所有对象，都有一个__proto__ 指向它的原型，我们称这个为原型链

在 Javascript 语言中，constructor 属性是专门为 function 而设计的，它存在于每一个 function 的prototype 属性中。这个 constructor 保存了指向 function 的一个引用。constructor指向创建的函数

上代码更容易理解

function Person() {
}
var p = new Person()
console.log(Person.prototype); // Object{}
console.log(p.prototype); // undifined
console.log(p.constructor); //function Person(){}

此处的p是通过 Person函数构造出来的，所以p的constructor属性指向Person
console.log(Person.constructor); //function Function(){}
之前提过，每个函数其实是通过new Function（）构造的
console.log({}.constructor); // function Object(){}
每个对象都是通过new Object（）构造的
console.log(Object.constructor); // function Function() {}
Object也是一个函数，它是Function（）构造的
console.log([].constructor); //function Array(){}

原型链：如果一个实例对象不存在某个属性，那么 JavaScript 就会往该构造函数的原型上找；如果该构造函数的原型没找到，那么会继续往 Object 的原型上找；如果 Object 的原型还没有，那就返回 undefined。

这条链：

• 实例对象.xxx -> 构造函数.prototype.xxx -> Object.prototype.xxx

 

person.__proto__ === Person.prototype
Person.__proto__ === Function.prototype
person.__proto__.__proto__ === Object.prototype
Object.prototype.__proto__ === null
通过 __proto__ 最终查找到的是 null

 

 

 

 

 

继承

function People(name){
　　//属性
　　this.name = name || Annie
　　//实例方法
　　this.sleep=function(){
　　　　console.log(this.name + '正在睡觉')
　　}
}
//原型方法
People.prototype.eat = function(food){
    console.log(this.name + '正在吃：' + food);
}

原型链继承

function Woman(){
}
Woman.prototype= new People();
Woman.prototype.name = 'haixia';
let womanObj = new Woman();

重点：让新实例的原型等于父类的实例。
特点：1、实例可继承的属性有：实例的构造函数的属性，父类构造函数属性，父类原型的属性。（新实例不会继承父类实例的属性！）
缺点：1、新实例无法向父类构造函数传参。
　　　2、继承单一。
　　　3、所有新实例都会共享父类实例的属性。（原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原型属性也会被修改！）

构造函数继承

function Woman(name){
　　//继承了People
　　People.call(this); //People.call(this，'wangxiaoxia');
　　this.name = name || 'renbo'
}
let womanObj = new Woman();

重点：用.call()和.apply()将父类构造函数引入子类函数（在子类函数中做了父类函数的自执行（复制））
特点：1、只继承了父类构造函数的属性，没有继承父类原型的属性。
　　　2、解决了原型链继承缺点1、2、3。
　　　3、可以继承多个构造函数属性（call多个）。
　　　4、在子实例中可向父实例传参。
缺点：1、只能继承父类构造函数的属性。
　　　2、无法实现构造函数的复用。（每次用每次都要重新调用）
　　　3、每个新实例都有父类构造函数的副本，臃肿。

组合继承

重点：结合了两种模式的优点，传参和复用
特点：1、可以继承父类原型上的属性，可以传参，可复用。
　　　2、每个新实例引入的构造函数属性是私有的。
缺点：调用了两次父类构造函数（耗内存），子类的构造函数会代替原型上的那个父类构造函数。

 

es6 

class A {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    getName() {
        return this.name;
    }
}

class B extends A {
    constructor(name, age) {
        super(name, age);
        this.job = "IT";
    }
    getJob() {
        return this.job;
    }
    getNameAndJob() {
        return super.getName() + this.job;
    }
}

var b = new B("Tom", 20);
console.log(b.name);
console.log(b.age);
console.log(b.getName());
console.log(b.getJob());
console.log(b.getNameAndJob());
//输出：Tom，20，Tom，IT，TomIT

 

 

https://www.jianshu.com/p/72156bc03ac1