JavaScript常用的几种继承方式

JavaScript是面向对象的弱类型语言,继承是其重要的特性之一,这里总结下常用的四种继承方法。

先定义一个父级构造函数,并在其原型上添加一个speak方法

//定义父级构造函数
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.intro = function() {
        console.log(this.name + ‘ is ‘ + this.age + ‘ years old‘);
    }
}
//父级原型添加新方法
Person.prototype.speak = function(language) {
    console.log(this.name + ‘ can speak ‘ + language);
}

以下四种继承方式均在此父级构造函数基础上实现。

1、传统形式,通过原型链继承

将父级构造函数的实例作为子级构造函数的原型

//定义子级构造函数
function Man() {

}
//将父级实例作为子级原型
Man.prototype = new Person(‘Jack‘, 18);
//子级原型添加name属性会覆盖原型name属性
Man.prototype.name = ‘Toms‘;
//创建子级实例对象
var man = new Man();
//调用父级构造函数内的方法
man.intro(); // Toms is 18 years old
//调用父级原型自定义的speak方法
man.speak(‘Chinese‘); // Toms can speak Chinese

缺点:继承父级所有属性和方法,没有选择性

2、通过父级构造函数,即子级构造函数内调用父级构造函数

其实就是借用别人的方法,实现自己的功能

function Man() {
    Person.call(this);
    this.name = ‘Jack‘;
    this.age = 19
}
var man = new Man();// 借用Person的intro方法
man.intro(); // Jack is 19 years old

缺点:不能继承父级构造函数原型,每次创建实例要多运行一个构造函数

3、通过原型共享实现继承

即子级原型等于父级原型

function Man(name) {
    this.name = name;
}
//构造函数原型共享
Man.prototype = Person.prototype;
var man = new Man(‘Jack‘);
//子级实例可调用共享的原型上的方法speak
man.speak(‘Chinese‘); // Jack can speak Chinese

缺点:共享原型,一个修改原型属性和方法,另一个会同步

4、堪称完美的圣杯模式

通过在一个立即执行函数中定义一个临时构造函数,来中转源构造函数到目标构造函数的原型链,这样修改目标构造函数的原型不会直接影响到源构造函数原型,

同时执行完毕立即销毁,减少内存开销。

var inherit = (function () {
    var Temp = function () {}; // 定义临时构造函数用于原型链的中转
    return function (Target, Origin) {
        Temp.prototype = Origin.prototype; // Temp继承Origin原型
        Target.prototype = new Temp(); // Target继承Temp对象原型
        Target.prototype.constructor = Target; // 改写Target原型上的构造器指向
        Target.prototype.ancestor = Origin.prototype; // 标记Target真正继承的原型
    }
}());

原文地址:https://www.cnblogs.com/splendid/p/10259476.html

时间: 2024-10-06 16:41:26

JavaScript常用的几种继承方式的相关文章

Javascript中的几种继承方式

开篇 从'严格'意义上说,javascript并不是一门真正的面向对象语言.这种说法原因一般都是觉得javascript作为一门弱类型语言与类似java或c#之类的强型语言的继承方式有很大的区别,因而默认它就是非主流的面向对象方式,甚至竟有很多书将其描述为'非完全面向对象'语言.其实个人觉得,什么方式并不重要,重要的是是否具有面向对象的思想,说javascript不是面向对象语言的,往往都可能没有深入研究过javascript的继承方式,故特撰此文以供交流. 为何需要利用javascript实现

Javascript中的几种继承方式比较

开篇 从'严格'意义上说,javascript并不是一门真正的面向对象语言.这种说法原因一般都是觉得javascript作为一门弱类型语言与类似java或c#之类的强型语言的继承方式有很大的区别,因而默认它就是非主流的面向对象方式,甚至竟有很多书将其描述为'非完全面向对象'语言.其实个人觉得,什么方式并不重要,重要的是是否具有面向对象的思想,说javascript不是面向对象语言的,往往都可能没有深入研究过javascript的继承方式,故特撰此文以供交流. 为何需要利用javascript实现

JavaScript中的几种继承方式对比

转自:http://blog.csdn.net/kkkkkxiaofei/article/details/46474069 从'严格'意义上说,JavaScript并不是一门真正的面向对象语言.这种说法原因一般都是觉得javascript作为一门弱类型语言与类似Java或c#之类的强型语言的继承方式有很大的区别,因而默认它就是非主流的面向对象方式,甚至竟有很多书将其描述为'非完全面向对象'语言. 为何需要利用JavaScript实现继承? 早期pc机器的性能确实不敢恭维,所有的压力全在服务器端,

JavaScript 的几种继承方式

JavaScript 的几种继承方式 原型链继承 构造函数继承 组合继承 (伪经典继承) 原型式继承 寄生式继承 寄生组合式继承 ES6 extends 继承 1, 原型链继承 原理是将父对象的属性和方法通过prototype进行引用 function people() { this.flag = true; this.func = function() { console.log("this is people func"); } } function boy() { this.se

js的6种继承方式

重新理解js的6种继承方式 注:本文引用于http://www.cnblogs.com/ayqy/p/4471638.html 重点看第三点 组合继承(最常用) 写在前面 一直不喜欢JS的OOP,在学习阶段好像也用不到,总觉得JS的OOP不伦不类的,可能是因为先接触了Java,所以对JS的OO部分有些抵触. 偏见归偏见,既然面试官问到了JS的OOP,那么说明这东西肯定是有用的,应该抛开偏见,认真地了解一下 约定 P.S.下面将展开一个有点长的故事,所以有必要提前约定共同语言: 1 2 3 4 5

重新理解JS的6种继承方式(转)

http://www.ayqy.net/ 写在前面 一直不喜欢JS的OOP,在学习阶段好像也用不到,总觉得JS的OOP不伦不类的,可能是因为先接触了Java,所以对JS的OO部分有些抵触. 偏见归偏见,既然面试官问到了JS的OOP,那么说明这东西肯定是有用的,应该抛开偏见,认真地了解一下 约定 P.S.下面将展开一个有点长的故事,所以有必要提前约定共同语言: /* * 约定 */ function Fun(){ // 私有属性 var val = 1; // 私有基本属性 var arr = [

重新理解JS的6种继承方式

写在前面 一直不喜欢JS的OOP,在学习阶段好像也用不到,总觉得JS的OOP不伦不类的,可能是因为先接触了Java,所以对JS的OO部分有些抵触. 偏见归偏见,既然面试官问到了JS的OOP,那么说明这东西肯定是有用的,应该抛开偏见,认真地了解一下 约定 P.S.下面将展开一个有点长的故事,所以有必要提前约定共同语言: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 /*  * 约定  */ function Fun(){     // 私有属性  

类设计中几种继承方式

 通过继承能够从已有的类派生出新的类,而派生类继承了基类的特征,包括方法.正如继承一笔财产要比自己白手起家容易一样,通过继承派生出的类通常比设计新类要容易得多.下面是可以通过继承完成的一些工作. ①可以在已有类的基础上添加功能. ②可以给类添加数据. ③可以修改类方法的行为. C++有三种继承方式:公有继承.保护继承和私有继承. 一.公有继承 公有继承是最常用的方式,它建立一种is-a关系,即派生类对象也是一个基类对象,可以对基类对象执行的任何操作,也可以对派生类对象执行. ①公有继承不建立

[总结] js的2种继承方式详解

这篇文章主要介绍了javascript的2种继承方式,分析对象冒充和原型链方式的不同,需要的朋友可以参考下. js中继承可以分为两种:对象冒充和原型链方式. 一.对象冒充包括三种:临时属性方式.call()及apply()方式1.临时属性方式 function Person(name){ this.name = name; this.say = function(){ alert('My name is '+this.name); } } function F2E(name,id){ this.