谈谈JavaScript的2种主要继承方式

最新推荐文章于 2024-02-23 13:33:07 发布

weixin_30697239

最新推荐文章于 2024-02-23 13:33:07 发布

阅读量61

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/var-foo-bar/p/5016663.html

本文介绍了JavaScript中两种主要的继承方式：原型继承和借用构造函数（call/apply）。通过实例展示了如何使用这两种方式实现继承，包括定义方法和属性。

今天给自己巩固一下js的继承知识，基础不好，有不对的地方，请尽量拍砖，越重越好。

js继承方法最主要的是2种，一种是通过原型的方式，一种是通过借用call&apply的构造函数方式。

1.原型(prototype)：

 1 function Body(name,age){// 创建一个Body类
 2     this.name = name;// 赋予基础属性name、age
 3     this.age = age;
 4 }
 5 Body.prototype.sayName =function() {// 给原型定义一个sayName的方法
 6     console.log(this.name);
 7 }
 8 var a = new Body('wutao','10');//创建一个Body的实例对象
 9 
10 function Another(){}
11 Another.prototype = new Body('www');//将Body实例对象给新创建的子类(Another)的prototype属性，这样，Another就拥有了Body的属性和方法
12 var b = new Another();//创建Another子类的实例
13 Another.prototype.sex ="mail";//定义子类的属性及方法
14 Another.prototype.saySex = function(){
15     console.log(this.sex);
16 }
17 a.sayName();//wutao
18 b.sayName();//www 实例b拥有父类Body的方法sayName
19 b.saySex();//mail 实例b拥有自己定义的方法saySex

2.借用构造函数（call&apply），也可以理解为组合式继承

call:

 1 function Person(name){
 2     this.name = name;
 3     this.sayHello = function(){
 4         console.log(this.name);
 5     }
 6 }
 7 
 8 function Son(name,age){
 9     Person.call(this,name,age);//call用法：将this指针指向父类构造函数，并依次传入参数，使其拥有父类的属性和方法
10     this.age = age;
11     this.sayFunc = function(){
12         console.log(this.name+"-"+this.age);
13     }  
14 }
15 var a = new Person('wutao');
16 var b = new Son("wwwwww",22);
17 a.sayHello();//wutao
18 b.sayHello();//wwwwww; 通过call继承来的父类Person的方法sayHello
19 b.sayFunc();//wwwwww-22

apply:

 1 function Person(name){
 2     this.name = name;
 3     this.sayHello = function(){
 4         console.log(this.name);
 5     }
 6 }
 7 
 8 function Son(name,age){
 9     Person.apply(this,[name,age]);//apply用法：类似call，将this指针指向父类构造函数，并传入一个由参数组成的数组参数，使其拥有父类的属性和方法
10     this.age = age;
11     this.sayFunc = function(){
12         console.log(this.name+"-"+this.age);
13     }  
14 }
15 var a = new Person('wutao');
16 var b = new Son("ttt",222);
17 a.sayHello();//wutao
18 b.sayHello();//ttt;通过apply继承来的父类Person的方法sayHello

19 b.sayFunc();//ttt-222