js中的继承(1)

• 原型链继承
• 构造函数继承
• 组合继承
• 原型式继承
• 寄生式继承
• 寄生式组合继承 这里只讲前三个继承方式：原型链继承 构造函数继承 组合继承

1.原型继承

将子构造函数的原型指向父构造函数的实例。

        // 创建父构造函数
        function Father() {
            this.colors = ['blue', 'green', 'red']
        }
        // 创建子构造函数
        function Son(name) {
            this.name = name
        }
        // 将子构造函数的原型指向父构造函数的实例对象
        Son.prototype = new Father()
        // 将子构造函数的原型下的constructtor属性指回Son
        Son.prototype.constructor = Son

        // 创建子对象
        var xiaoming = new Son('xiaoming')
        var datou = new Son("datou")

        console.log(datou.colors)
        console.log(xiaoming.colors)

输出如下：实现了继承。

存在问题：

// 创建父构造函数
        function Father() {
            this.colors = ['blue', 'green', 'red']
        }
        // 创建子构造函数
        function Son(name) {
            this.name = name
        }
        // 将子构造函数的原型指向父构造函数的实例对象
        Son.prototype = new Father()
        // 将子构造函数的原型下的constructtor属性指回Son
        Son.prototype.constructor = Son


        // 创建子对象
        var xiaoming = new Son('xiaoming')
        var datou = new Son("datou")
        // 给xiaoming继承的原型上的color数组添加black
        xiaoming.colors.push("black")
        console.log(datou.colors)
        console.log(xiaoming.colors)

输出 发现未添加black的子实例对象也变化了。

2.构造函数继承

        // 构造函数继承
        function Father() {
            this.colors = ['blue', 'green', 'red']
        }
        // 创建子构造函数
        function Son(name) {
            this.name = name
            //调用构造函数，并非实例化，将其this指向Son的实例对象
            Father.call(this)
        }


        var xiaoming = new Son("xiaoming")
        var datou = new Son("datou")
        // 给xiaoming继承的原型上的color数组添加black
        xiaoming.colors.push("black")

        console.log(xiaoming)
        console.log(datou)

输出：其中一个子对象改变原型属性colors，没有影响到另一个子对象。

问题：子对象没法访问父级的原型上的方法

        // 构造函数继承
        function Father() {
            this.colors = ['blue', 'green', 'red']
        }
        Father.prototype.getage=function(){
            console.log(35)
        }
        // 创建子构造函数
        function Son(name) {
            this.name = name
            //调用构造函数，并非实例化，将其this指向Son的实例对象
            Father.call(this)
        }


        var xiaoming = new Son("xiaoming")
        var datou = new Son("datou")
        xiaoming.getage()

3.组合继承

综合以上两个继承方法， 采用组合继承

        // 创建父构造函数
        function Father() {
            this.colors = ['blue', 'green', 'red']
        }
        // 添加原型方法
        Father.prototype.getage=function(){
            console.log(35)
        }
        // 创建子构造函数
        function Son(name) {
            this.name = name
            //  调用构造函数，并非实例化，将其this指向Son的实例对象
            Father.call(this)
        }
        // 将子构造函数的原型指向父构造函数的实例对象
        Son.prototype = new Father()
        // 将子构造函数的原型下的constructtor属性指回Son
        Son.prototype.constructor = Son


        // 创建子对象
        var xiaoming = new Son('xiaoming')
        var datou = new Son("datou")
        // 给xiaoming继承的原型上的color数组添加black
        xiaoming.colors.push("black")
        console.log(datou.colors)
        console.log(xiaoming.colors)
        datou.getage()