JavaScript 进阶 36 -- JavaScript 继承

 继承的主要思路就是利用 原型链，如果理解了原型链，继承问题就理解了一半。

原理：让一个引用类型继承另一个引用类型的属性和方法。

• .原型对象通过 constructor属性 指向构造函数
• 实例通过 __proto__ 指向原型对象

大白话来说就是 儿子继承父亲。实现继承 首先得有一个父类

在es5中继承有两种：1、实例属性的继承，2、公共属性的继承。

function Person(name){
    this.name = name //父类  实例属性 【例1】
}

//父类 原型属性 【例2】
Person.prototype.eat = function(){
    console.log('eating')
}

//父类的 静态方法 【例3】
Person.a = function(){
    return 100;
}

上面一段代码就是父类，我们看看子类如何继承父类的

【 例 1 】 子类 继承父类 的 实例属性 ：调用父级的构造函数（需改变父类的this的指向，让其指向这个子类）====（借用构造函数继承）

function Student(name) {
    
    Person();//undefined 
}

let s1 = new Student('lucy');
console.log(s1.name);//undefined
console.log(s1.__proto__ === Student.prototype);//true

 

此时的 s1.name 的值是  undefined  。因为 在子类Student实例化后 的 this 指向的还是Student，而子类中并不存在name这个属性，这样直接调用 相当于在浏览器中调用 就是window调用 指向的是window.name加到window上去了

要想使用父类的属性，在调用父类的时候需改变父类的this指向，让其指向子类：该函数的this指向这个student这个实例，当它继承父类Person，调用Person函数时 需要将Person的this指给这个函数

function Student(name) {

    Person.call(this,name);//改变this指向，.call(this，参数)
    //Person.apply(this,[name]);//call,apply 都可以改变this指向，apply的参数需要以数组的形式传参
}

let s1 = new Student('lucy');
console.log(s1.name);//lucy
console.log(s1.__proto__ === Student.prototype);//true

此时的 s1.name 就继承了父类的 实例属性，就有值了。这里面有了两个改变函数this的指向的方法。

.call()   和  .apply() 都接收两个参数，

第一个参数：都一个指定的 this 值

第二个参数：

.call() ：直接放进去的 。单独给出的一个或多个参数来调用一个函数，多个参数中间逗号隔开。

apply() ：所有参数 都必须放在 一个数组里面传进去

这两个方法类似，只有一个区别，就是 call() 方法接受的是一个参数列表，而 apply() 方法接受的是一个包含多个参数的数组。关于这两个方法更详细的资料大家自己去查查吧。

继续说继承的知识。

【 例 2 】子类 继承 公共属性(原型上的)  方法一：直接借助于自己的原型

Student.prototype.__proto__ = Person.prototype;

let s2 = new Student('lucy');
console.log(s2.constructor);//[Function: Student] s1的构造函数指向自己
console.log(Person.prototype.constructor);//[Function: Person]  Person的构造函数指向自己
console.log(Student.prototype.constructor === Student);//true
s2.eat();//eating

【 例 2 】子类 继承 公共属性(原型上的)   方法二：借助于其他的原型来赋值 使用Object.create()

Student.prototype = Object.create(Person.prototype);//{__proto__:Person.prototype}
//Object.create的原理
/*Student.prototype = create(Person.prototype)
function create(parentPrototype){
    function Fn(){}
    Fn.prototype = parentPrototype;
    return new Fn();
    
}
//原理：s1.eat()  Student.prototype === new Fn() ----__proto__---->Fn.prototype -------->Person.prototype
*/
let s2 = new Student();
console.log(s2.constructor);//[Function: Person] 这样不对呀 。Object.create()可以传第二参数，[指定 constructor],如下面代码
s2.eat();//eating

原理：s1.eat()  Student.prototype === new Fn() ----__proto__---->Fn.prototype -------->Person.prototype 。当我们打印出 s2.constructor 时发现  s2的构造函数并没有指向 Person.prototype。我们可以告诉constructor用自己传来的值。create接收第二个参数，代码如下

//告诉constructor用自己传来的值
Student.prototype = Object.create(Person.prototype,{
    constructor:{
        value:Student
    }
});
let s2 = new Student('lucy');
console.log(s2.constructor);//[Function: Student] s2的构造函数指向自己
console.log(s2.name);//lucy
console.log(s2.__proto__ === Student.prototype);//true

//调用 :  继承 原型属性 对应【 例2 】子类 继承 公共属性(原型上的)
s2.eat();//eating

【 例 3 】  子类 调用 父类的静态方法

//【 例 3 】  子类 调用 父类的静态方法
//console.log(Student.a());// 报错了，Student中没有a方法

Student.__proto__ = Person;//让 Student 指向父类 Person
console.log(Student.a());//100

 

上面一些是关于es5的继承，下一次说下es6的继承。

 

 

 

 

好啦 这一篇先到这里。我的文章都是学习过程中的总结，如果发现错误，欢迎留言指出，我及时更正