js oop中的三种继承方法

Posted 2020-09-18 GlenLi

 JS OOP 中的三种继承方法：

 很多读者关于js opp的继承比较模糊，本文总结了oop中的三种继承方法，以助于读者进行区分。

 <继承使用一个子类继承另一个父类，子类可以自动拥有父类的属性和方法。（继承的两方，发生在两个类之间）>

一、通过object实现继承

1：定义父类
function Parent(){}
2：定义子类
funtion Son(){}
3：通过原型给Object对象添加一个扩展方法。
Object.prototype.customExtend = function(parObj){
for(var i in parObj){
// 通过for-in循环，把父类的所有属性方法，赋值给自己
this[i] = parObj[i];
}
}
4：子类对象调用扩展方法
Son.customExtend(Parent);

 1         // 1.定义父类
 2         function Person(name,age){
 3             this.name = name;
 4             this.age = age;
 5             this.say = function(){
 6                 alert(this.name+":"+this.age);
 7             }
 8         }
 9         // 2.定义子类
10         function Student(no){
11             this.no = no;
12             this.add = function(a,b){
13                 alert(a+b);
14             }
15         }
16         function Programmer(lang){
17             this.lang = lang;
18             this.codding = function(){
19                 alert("我爱敲代码！敲代码使我快乐！");
20             }
21         }
22         // 3.通过原型给Object对象添加一个扩展方法。
23         Object.prototype.customExtend = function(parObj){
24             for(var i in parObj){ 
25                 // 通过for-in循环，把父类的所有属性方法，赋值给自己
26                    this[i] = parObj[i];
27             }
28         }
29         
30         var p = new Person("小明","18");
31         var s = new Student("0001");
32         s.customExtend(p);//现在s继承了p的所有属性和方法。
33         console.log(s)
34         
35         var pro = new Programmer("javascript");
36         pro.customExtend(p);
37         console.log(pro)
38         

二、使用call和apply进行继承

首先，了解一下call和apply：通过函数名调用方法，强行将函数中的this指向某个对象；
 call写法： func.call(func的this指向的obj,参数1,参数2...);
 apply写法： func.apply(func的this指向的obj,[参数1,参数2...]);
call与apply的唯一区别：在于接收func函数的参数方式不同。call采用直接写多个参数的方式，而apply采用是一个数组封装所有参数。
② 使用call和apply
1：定义父类
funtion Parent(){}
2：定义子类
function Son(){}
3：在子类中通过call方法或者apply方法去调用父类。
function Son(){
Parent.call(this,....);
}

 1 function Person(name,age){
 2             this.name = name;
 3             this.age = age;
 4             this.say = function(){
 5                 alert("我叫："+this.name+";今年："+this.age+"岁");
 6             }
 7         }
 8 function Student(no,stuName,stuAge){
 9             
10             this.no = no;
11             Person.call(this,stuName,stuAge);
12                  }
13 var stu = new Student(12,"zhangsan",14);
14         stu.say();
15         
16         console.log(stu)

三、使用原型继承

③ 使用原型继承
1：定义父类
function Parent(){}
2：定义子类
function Son(){}
3：把在子类对象的原型对象声明为父类的实例。
Son.prototype = new Parent();

 1 function Person(name,age){
 2             this.name = name;
 3             this.age = age;
 4             this.say = function(){
 5                 alert("我叫："+this.name+";今年："+this.age+"岁");
 6             }
 7         }
 8 function Student(no){
 9             this.no = no;
10         }
11         
12         Student.prototype = new Person("张三",14)
13         
14         var stu = new Student(12);
15         
16         stu.say();
17         
18         console.log(stu)

希望以上代码能够帮助读者解决继承的问题！