JavaScript面向对象中的继承

时间：2021-10-02 05:31:39

1.1继承的基本概念

使用一个子类，继承另一个父类，那么子类可以自动拥有父类中的所有属性和方法，这个过程叫做继承。

>>>继承的两方，发生在两个类之间。

实现继承的三种方式：

　　扩展Object的prototype实现继承、使用call和apply和bind实现继承、使用原型实现继承。

1.2扩展Object的prototype实现继承

　　扩展Object的prototype实现继承的原理，就是通过循环，将父类对象的所有属性和方法，全部赋给子类对象。关键点在于for-in循环，即使不扩展object，也能通过简单的循环实现操作。

具体实现步骤：

①定义一个父类

function Parent(){}

②定义一个子类

function Son(){}

③通过prototype给object类添加一个扩展方法（通过for-in循环，将父类的属性和方法赋给子类）

Object.prototype.extend = function(parent){

    for(var i in parent){

        this[i] = parent[i];

    }

}

④分别拿到父类对象，和子类对象

var p = new Person();

var s = new Student();

⑤用子类对象，调用扩展方法，实现继承操作

s.extend(p);

完整代码如下：

// 1.定义父类

        function Person(name,age){

            this.name = name;

            this.age = age;

            this.say = function(){

                alert(this.name+":"+this.age);

            }

        }

        // 2.定义子类

        function Student(no){

            this.no = no;

            this.add = function(a,b){

                alert(a+b);

            }

        }

        function Programmer(lang){

            this.lang = lang;

            this.codding = function(){

                alert("我在读书！");

            }

        }

        // 3.通过原型给Object对象添加一个扩展方法。

        Object.prototype.customExtend = function(parObj){

            for(var i in parObj){

                // 通过for-in循环，把父类的所有属性方法，赋值给自己

                   this[i] = parObj[i];

            }

        }

        var p = new Person("张三","18");

        var s = new Student("0001");

        s.customExtend(p);//现在s继承了p的所有属性和方法。

完整代码

扩展Object的prototype实现继承的缺点：

　　①无法通过一次实例化，直接拿到完整的子类对象。而需要先拿到父类对象和子类对象两个对象，再手动合并;

　　②扩展object的继承方法，也会保留在子类对象上。

1.3通过原型实现继承

　　通过原型实现继承的原理，就是将父类对象，赋值给子类的prototype，那么父类对象的属性和方法就会出现在子类的prototype中。那么，实例化子类时，子类的prototype又会到子类对象的__proto__中，最终，父类对象的属性和方法，会出现在子类对象的__proto__对象中。

具体实现步骤：

①定义一个父类

function Parent(){}

②定义一个子类

function Student(){}

③将父类对象，赋值给子类的prototype

Son.prototype = new Person();

④拿到子类对象，就会将父类对象的所有属性和方法，添加到__proto__

var s = new Son()

完整代码如下：

function Person(name,age){

this.name = name;

this.age = age;

this.say = function(){

alert("我叫："+this.name+";今年："+this.age+"岁");

}

}

function Student(no){

this.no = no;

}

Student.prototype=new Person("jh",14); //子类prototype指向父类对象

var stu = new Student(12);

stu.say();//继承后，子类获得了父类的全部属性方法

完整代码

通过原型实现继承的特点：

　　①子类自身的所有属性都是成员属性；父类继承过来的属性都是原型属性。

　　②依然无法通过一步实例化拿到完成的子类对象。

1.4使用call和apply和bind实现继承

使用call和apply和bind实现继承的作用及区别：

1、三个函数的作用：通过函数名调用这三个函数，可以强行将函数中的this指定为某个对象

2、三个函数的写法(区别)：(面试题爱问)

　　call： func.call(func的this指向的obj，func参数1，func参数2，……);

　　apply： func.call(func的this指向的obj，[func参数1，func参数2，……]);

　　bind： func.call(func的this指向的obj)(func参数1，func参数2，……);

3、三个函数的唯一区别，在于接受func的参数列表的方式不同，除此之外，功能上没有任何差异！

具体实现步骤：

①定义一个父类

funtion Parent(){}

②定义子类时，在子类使用三个函数，调用父类，将父类函数的this，指向为子类函数的this

function Son(no,name){
　　this.no = no;
　　Person.call(this,name);
}

③实例化子类时，将自动继承父类属性

var s = new Son(12,"zhangsan");

完整代码如下：

function Person(name,age){

            this.name = name;

            this.age = age;

            this.say = function(){

                alert("我叫："+this.name+";今年："+this.age+"岁");

            }

        }

        function Student(no,stuName,stuAge){

            this.no = no;

            Person.call(this,stuName,stuAge);

            // 执行上述代码，相当于把Person类所有this替换为Student类this

            // 换言之，也就是把Person类所有属性和方法，全给了Student类

        }

        var stu = new Student(12,"zhangsan",14);

        stu.say();// 子类继承了父类say方法

完整代码

好了！今天就给大家分享一下JavaScript面向对象中的继承~~如果有什么疑问，欢迎大家多多留言~~

相关文章