js原型继承方法以及封装方法

前言

    最近在复习JS原型继承方面的东西，所以看了廖雪峰老师关于原型继承的介绍和方法，有所体会。在此记下笔记，供自己以后参考也献给和我一样的小菜鸡们。

    先声明一个构造函数

function Dad(obj){ //声明构造函数 Dad -- 父
    this.name = obj.name || 'lan';
}
Dad.prototype.hello = function(){ // 添加方法 hello
    console.log('hello'+ this.name + '!!!');
}

    现在我们要基于 Dad 扩展出 Son，所以先定义

function Son(obj){ //声明构造函数 Son -- 子
    Dad.call(this,obj);
    this.age = obj.age || '40';
}

    在声明构造函数Son的时候我们调用了Dad但是调用了Dad不代表继承了。我们的目的是基于Son声明的对象不仅能调用Son的方法，也能调用Dad的方法。所以我使用了最简单暴的方法

Son.prototype = Dad.prototype;

    但是这样显然是不行的，这样Dad和Son就公用了一个原型对象，这样我们定义Son的意义就没有了，所以我们需要定义一个空函数来作为桥梁，把这个空函数指向Dad，像这样

function F(){} //定义一个空函数 -- 桥梁
F.prototype = Dad.prototype;// 将空函数指向 Dad

    接下来就可以一顿操作了

F.prototype = Dad.prototype;// 将空函数指向 Dad
Son.prototype = new F(); // 将 Son 指向 F
Son.prototype.constructor = Son; // 将 Son 的构造器修正
Son.prototype.dirve = function(){ // 给 Son 定义一个新的方法
    console.log(this.name+"会开车");
}
var xiaoming = new Son({ // 基于 Son 声明一个对象
    name: '小明',
    age: 20
})
console.log(xiaoming); //若构造器没有修正则输出 - Dad { name: '小明', age: 20 }
//修正之后输出 - Son { name: '小明', age: 20 }
xiaoming.hello(); // hello小明!!!
xiaoming.dirve(); // 小明会开车

    以上就是原型继承的方法，看起来代码会很多，而且无法复用，所以需要封装一下，介绍一下廖雪峰老师封装的方法

function inherits(Child, Parent) { //封装一个原型继承的方法
    var F = function () {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
}
function Dad(obj) { //声明构造函数 Dad -- 父
    this.name = obj.name || 'lan';
}
Dad.prototype.hello = function () { // 添加方法 hello
    console.log('hello' + this.name + '!!!');
}

function Son(obj) { //声明构造函数 Son -- 子
    Dad.call(this, obj);
    this.age = obj.age || '40';
}
inherits(Son,Dad); //使用 验证一下
var xiaohong = new Son({
    name: '小红',
    age: 18
})
xiaohong.hello(); // hello小红!!!

    若有不对请大佬指正，谢谢！

    廖雪峰老师的博客点击打开链接