JavaScript中的几种继承方式对比

时间:2021-10-18 00:14:40

  转自:http://blog.csdn.net/kkkkkxiaofei/article/details/46474069

  从’严格’意义上说,JavaScript并不是一门真正的面向对象语言。这种说法原因一般都是觉得javascript作为一门弱类型语言与类似Java或c#之类的强型语言的继承方式有很大的区别,因而默认它就是非主流的面向对象方式,甚至竟有很多书将其描述为’非完全面向对象’语言。

为何需要利用JavaScript实现继承?

  早期pc机器的性能确实不敢恭维,所有的压力全在服务器端,客户端浏览器纯属摆设。再加上那时流行的table布局以及电话线的上网方式导致浏览一个网页十分的卡;而今互联网时代飞速发展,个人电脑硬件得到了极大提升,客户端浏览器的性能也十分的酸爽,web开发的模式也在悄悄改变:服务端不再像以前那样“辛苦”,取而代之的是尽可能的让浏览器承担更多的任务,如此一来,压力分摊到每个客户端上,企业不但节省成本,随之也让web前端开发变的更加有趣--越来越多的前端框架层出不穷,甚至出现了许多前端的MVC框架。在这种背景下,javascript的角色已经绝对不是只做一些简单的验证,发送一些请求或者操作一些DOM,更多的需要担任类似前端路由和业务层的角色,并且javascript需要做大量的逻辑性任务,这里面就包括前台数据的抽离(即model),而只有运用面向对象的思维才能很好的对抽离数据进行处理,因此继承就在这里显得举足轻重。

从一个简单的需求开始:

  现从前台抽离一个model名为Person,其有基本属性name和age,默认每个人都会说话,因此将说话的功能say放在了原型对象上,以供每个实例享用。现在对于Man来说,它需要继承Person的基本属性,并且在此基础上添加自己特有的属性。

function Person (name, age) {
this.name = name;
this.age = age;
}
Person.prototype.say = function(){
console.log('hello, my name is ' + this.name);
};
function Man() {
//my own properties
}

下面介绍集中主流的继承方式:

1.原型链继承

function Person (name, age) {
this.name = name;
this.age = age;
}
Person.prototype.say = function(){
console.log('hello, my name is ' + this.name);
};
function Man() {
}
Man.prototype = new Person('Scott');
var man1 = new Man();
man1.say(); //hello, my name is Scott
var man2 = new Man();
console.log(man1.say === man2.say);//true
console.log(man1.name === man2.name);//true

  这种继承方式很直接,为了获取Person的所有属性方法(实例上的和原型上的),直接将父类的实例new Person('pursue')赋给了子类的原型,其实子类的实例man1,man2本身是一个完全空的对象,所有的属性和方法都得去原型链上去找,因而找到的属性方法都是同一个。 
所以直接利用原型链继承是不现实的。

2.利用构造函数继承

function Person (name, age) {
this.name = name;
this.age = age;
}
Person.prototype.say = function(){
console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
Person.apply(this, arguments);
}
//Man.prototype = new Person('Scott');
var man1 = new Man('ivy');
var man2 = new Man('jeremy');
console.log(man1.name === man2.name);//false
man1.say(); //say is not a function

  这里子类的在构造函数里利用了apply去调用父类的构造函数,从而达到继承父类属性的效果,比直接利用原型链要好的多,至少每个实例都有自己那一份资源,但是这种办法只能继承父类的实例属性,因而找不到say方法,为了继承父类所有的属性和方法,则就要修改原型链,从而引入了组合继承方式。

3.组合继承

function Person (name, age) {
this.name = name;
this.age = age;
}
Person.prototype.say = function(){
console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
Person.apply(this, arguments);
}
Man.prototype = new Person();
var man1 = new Man('Scott');
var man2 = new Man('Jeremy');
console.log(man1.name === man2.name);//false
console.log(man1.say === man2.say);//true
man1.say(); //hello, my name is Scott

  需要注意的是man1man2的实例属性其实是覆盖了原型属性,但是并没要覆盖掉原型上的say方法(因为它们没有),所以这里man1.say === man2.say依然返回true,因而需要十分小心没有覆盖掉的原型属性,因为它是所有实例共有的。

4.寄生组合继承

最经典的javascript的继承方式。其实,只需要明白原型对象的结构即可:

function Person (name, age) {
this.name = name;
this.age = age;
}
Person.prototype.say = function(){
console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
Person.apply(this, arguments);
}
Man.prototype = Object.create(Person.prototype);//a.
Man.prototype.constructor = Man;//b.
var man1 = new Man('Scott');
var man2 = new Man('Jeremy');
console.log(man1.say == man2.say);//true
console.log(man1.name == man2.name);//false

其实寄生组合继承和上面的组合继承区别仅在于构造子类原型对象的方式上(a.和b.),这里用到了Object.creat(obj)方法,该方法会对传入的obj对象.

进行浅拷贝,类似于:

function create(obj){
function T(){};
T.prototype = obj;
return new T();
}

因此,a.会将子类的原型对象与父类的原型对象进行很好的连接,而并不像一般的组合继承那样直接对子类的原型进行复制(如Man.prototype = new Person();),这样只是很暴力的在对属性进行覆盖。而寄生组合继承方式则对实例属性和原型属性分别进行了继承,在实现上更加合理。

JavaScript中的几种继承方式对比的更多相关文章

  1. C++中的三种继承方式

    1,被忽略的细节: 1,冒号( :)表示继承关系,Parent 表示被继承的类,public 的意义是什么? class Parent { }; class Child : public Parent ...

  2. javascript中对象两种创建方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. js中的几种继承方法

    JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一. 继承:子承父业:一个原本没有某些方法或属性的对象,统一写方法,拿到了另外一个对象的属性和方法 下面是js中的几种继承方式 1.改变this ...

  4. Javascript的四种继承方式

    在Javascript中,所有开发者定义的类都可以作为基类,但出于安全性考虑,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击. 选定基类后,就可 ...

  5. JavaScript之四种继承方式讲解

    在Javascript中,所有开发者定义的类都可以作为基类,但出于安全性考虑,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击. 选定基类后,就可 ...

  6. C&plus;&plus; 中三种继承方式的理解

    一.公有继承(public inheritance) 1.概念:当类的继承方式为公有继承时,基类的公有成员和保护成员的访问属性在派生类中不变,而基类的私有成员不可以直接访问. 实验一下:   我们用代 ...

  7. C&plus;&plus;中的类继承&lpar;1&rpar; 三种继承方式

    继承是使代码可以复用的重要手段,也是面向对象程序设计的核心思想之一.简单的说,继承是指一个对象直接使用另一对象的属性和方法.继承呈现了 面向对象程序设 计的层次结构, 体现了 由简单到复杂的认知过程. ...

  8. JavaScript的3种继承方式

    JavaScript的继承方式有多种,这里列举3种,分别是原型继承.类继承以及混合继承. 1.原型继承 优点:既继承了父类的模板,又继承了父类的原型对象: 缺点:不是子类实例传参,而是需要通过父类实例 ...

  9. JavaScript几种继承方式

    我们先构建一个Person的构造函数 function Person(name) { this.name=name; } Person.prototype.sayHi=function () { co ...

随机推荐

  1. OpenCV从入门到放弃系列之——如何扫描图像、利用查找表和计时

    目的 如何遍历图像中的每一个像素? OpenCV的矩阵值是如何存储的? 如何测试我们所实现算法的性能? 查找表是什么?为什么要用它? 测试用例 颜色空间缩减.具体做法就是:将现有颜色空间值除以某个输入 ...

  2. UI学习笔记---第十天UITableView表视图编辑

    UITableView表视图编辑 表视图编辑的使用场景 当我们需要手动添加或者删除某条数据到tableView中的时候,就可以使用tableView编辑.比如微信 扣扣中删除和某人的通话 当我们需要手 ...

  3. windows10UWP&colon;如何判断一个文件或者文件夹是否存在?

    使用 StorageFolder.TryGetItemAsync 方法,尝试按名称获取文件或文件夹,不需将错误捕捉逻辑添加到代码(就像使用 StorageFolder.GetItemAsync 一样) ...

  4. 使用Calendar增加日期

    /** * @Description: 当前日期加上n个月返回long date */ public static long getLongDateAddMonth(int n){ Calendar ...

  5. &lbrack;置顶&rsqb; Android资源文件分析

    1)修改开机默认壁纸 Android开机默认资源文件为:frameworks/base/core/res/res/values/config.xml 我们找到wallpaper行: <strin ...

  6. Linux下安装Nginx并配置一个图片服务器

    首先安装nginx安装环境 nginx是C语言开发,建议在linux上运行,本教程使用Centos6.5作为安装环境. gcc 安装nginx需要先将官网下载的源码进行编译,编译依赖gcc环境,如果没 ...

  7. springMVC--4种映射处理器handlerMapping

    根据controller的name名称来映射寻找controller:BeanNameUrlHandlerMapping  (默认) 1.1开启该映射:默认是开启的 <bean class=&q ...

  8. 开发常用镜像资源替换为国内开源镜像&lpar;yum&comma;compose&comma;maven&comma;docker&comma;android sdk&comma;npm&comma;国内开源镜像汇总&rpar;

    一.国内开源镜像站点汇总 阿里云开源镜像站 (http://mirrors.aliyun.com/)网易开源镜像站 (http://mirrors.163.com/)中国科学技术大学开源镜像站 (ht ...

  9. LinkedList、Stack、Queue、PriorityQueue的总结

    1.这几种容器的特点 都是按照顺序来存储元素. 取元素的时候的不同点: LinkedList:按照下标随意取元素 Stack:后进先出取元素 Queue:先进先出取元素 PriorityQueue:按 ...

  10. Golang后台开发初体验

    转自:http://blog.csdn.net/cszhouwei/article/details/37740277 补充反馈 slice 既然聊到slice,就不得不提它的近亲array,这里不太想 ...