在javascript里面看到javascript的继承模式和传统的继承模式是有区别的,就想查资料看一下到底有区别,就看到了这篇文章,觉得讲得还可以,暂时先放上来,以后有别的东西再补充:

http://segmentfault.com/a/1190000000766541

基本模式

var Parent = function(){
this.name = 'parent';
};
Parent.prototype.getName = function(){
return this.name;
};
Parent.prototype.obj = {a:1}; var Child = function(){
this.name = 'child';
}
Child.protytype = new Parent(); var parent = new Parent();
var child = new Child(); console.log(parent.getName());//parent
console.log(child.getName());//child

这种事最简单实现原型继承的方法,直接把父类的对象复制给子类的构造函数的原型,这样子类的对象就可以访问到父类以及父类构造函数的protytype



这种方法的优点就是实现起来比较简单,不需要任何特殊的操作;同时他的缺点也很明显,如果子类需要做跟父类构造函数中相同的初始化动作,那么就得在子类构造函数中再重复一遍父类中的操作:

var Parent = function(name){
this.name = name || 'parent';
};
Parent.prototype.getName = function(){
return this.name;
};
Parent.prototype.obj = {a:1}; var Child = function(name)
{
this.name = name || 'child';
};
Child.prototype = new Parent(); var parent = new Parent('myParent');
var child = new Child('myChild'); console.log(parent.getName());//myParent
console.log(child.getName());//myChild

上述还只是初始化name属性,如果初始化工作不断增加,这种方式也不是很方便。

借用构造函数

var Parent = function(name){
this.name = name || 'parent';
};
Parent.prototype.getName = function(){
return this.name;
}
Parent.prototype.obj = {a:1}; var Child = function(name){
Parent.apply(this,arguments);
}
Child.prototype = new Parent(); var parent = new Parent('myParent');
var child = new Child('myChild'); console.log(parent.getNmae());//myParent
console.log(child.getName());//myChild

上面这种方法在子类构造函数中通过apply调用父类的构造函数进行相同的的初始化工作,这样不管负累做了多少初始化工作,子类可以执行同样的初始化工作。但是上面这种实现方法存在一个问题,父类构造函数被执行了两次,一次是在子类构造函数中,椅子是在赋值子类原型的时候,这是多余的,我们可以做以下改进:

var Parent = function(name){
this.name = name || 'parent';
};
Parent.prototypr.getName = function(){
return this.name;
};
Parent.prototype.obj = {a:1}; var Child = function(name){
Parent.apply(this,arguments);
};
Child.protytype = Parent.protytype; var parent = new Parent('myParent')
var child = new Child('myChild'); console.log(parent.getName());//myParent
console.log(child.getName());//myChild

这样我们只需要在子类构造函数中执行一次父类的构造函数,同时又可以继承父类原型中的属性,这也比较原型的初衷,就是吧需要复用的内容放在原型中,我们可以继承原型中可复用的内容

临时构造函数模式

上面借用构造函数模式还是存在问题,它把父类的原型直接赋值给子类的原型,这会造成一个问题,就是如果对子类的原型做了修改,那么这个修改同时也会影响到父类的原型,进而影响父类对象。

var Parent = function(name){
this.name = name || 'parent';
};
Parent.prototype.getName = function(){
return this.name;
};
Parent.prototype.obj = {a:1}; var Child = function(name){
Parent.apply(this,arguments);
};
var F = new function(){};
F.prototype = Parent.prototype;
Child.prototype = new F(); var parent = new Parent('myParent');
var child = new Child('myChild'); console.log(parent.getName());//myParent
console.log(child.getName());/myChild

这样做事在子类原型和父类原型之间加入一个临时的构造函数F,切断了子类原型和父类原型之间的联系,这样子类原型的修改就不会影响到父类原型。

继续讨论

上面可以刻到的我们在Parent的prototype属性中加入一个obj对象字面量属性,但是一直没有使用

var Parent = function(name){
this.name = name || 'parent';
};
Parent.prototype.getName = function(){
return this.name;
};
Parent.prototype.obj = {a:1}; var Child = function(name){
Parent.aplly(this,arguments);
};
var F = new function(){};
F.prototype = Parent.prototype;
Child.prototype = new F(); var parent = new Parent('myParent');
var child = new Child('myChild'); console.log(child.obj.a);//1
console.log(parent.obj.a);//1
child.obj.a = 2;
console.log(child.obj.a);//2
console.log(parent.obj.a);//2

在上面这种情况,当我们把child对象obj.a修改的时候,同时父类的原型中的obj.a也会被修改。原因是因为当访问child.obj.a的时候,我们会沿着原型链一直找到父类的prototype中,然后找到了obj属性,然后对obj.a进行修改.

var Parent = function(name){
this.name = name || 'parent';
};
Parent.prototype.getName = function(){
return this.name;
};
Parent.prototype.obj = {a:1}; var Child = function(name){
Parent.aplly(this,arguments);
};
var F = new function(){};
F.prototype = Parent.prototype;
Child.prototype = new F(); var parent = new Parent('myParent');
var child = new Child('myChild'); console.log(child.obj.a);//1
console.log(parent.obj.a);//1
child.obj.a = 2;
console.log(child.obj.a);//2
console.log(parent.obj.a);//2

javascript的继承模式的更多相关文章

  1. 一文详解JavaScript的继承模式

    1 原型链继承 #### ES6中通过原型继承多个引用类型的属性和方法,由于原型和实例的关系,即每个构造函数都有自己的原型对象,同时原型有一个属性指向构造函数,并且实例有一个内部的指针指向原型.如果存 ...

  2. 【读书笔记】读《JavaScript模式》 - 函数复用模式之现代继承模式

    现代继承模式可表述为:其他任何不需要以类的方式考虑得模式. 现代继承方式#1 —— 原型继承之无类继承模式 function object(o) { function F() {}; F.protot ...

  3. 【读书笔记】读《JavaScript模式》 - 函数复用模式之类式继承模式

    实现类式继承的目标是通过构造函数Child()获取来自于另外一个构造函数Parent()的属性,从而创建对象. 1.类式继承模式#1 —— 默认方式(原型指向父函数实例) function Paren ...

  4. 浅谈 JavaScript 中的继承模式

    最近在读一本设计模式的书,书中的开头部分就讲了一下 JavaScript 中的继承,阅读之后写下了这篇博客作为笔记.毕竟好记性不如烂笔头. JavaScript 是一门面向对象的语言,但是 ES6 之 ...

  5. JavaScript的7种继承模式

    <JavaScript模式>一书中,对于JavaScript的几种继承模式讲解得很清楚,给我提供了很大帮助.总结一下,有如下7种模式. 继承模式1--设置原型(默认模式) 实现方式: // ...

  6. javascript类式继承模式#4——共享原型

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. javascript类式继承模式#3——借用和设置原型

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. javascript类式继承模式#2——借用构造函数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. javascript类式继承模式#1——默认模式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Categorical Data

    This is an introduction to pandas categorical data type, including a short comparison with R's facto ...

  2. MySQL WAL

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11447794.html WAL: Write-Ahead Logging 先写日志,再写磁盘.具体说, ...

  3. JavaWeb(四):JDBC

    数据持久化(persistence) 把数据保存到可掉电式存储设备中以供之后使用. 大多数情况下,特别是企业级应用,数据持久化意味着将内存中的数据保存到硬盘上加以”固化”,而持久化的实现过程大多通过各 ...

  4. [AGC001E]BBQ Hard 组合数学

    题目描述 Snuke is having another barbeque party. This time, he will make one serving of Skewer Meal. He ...

  5. BZOJ 1597: [Usaco2008 Mar]土地购买 动态规划 + 斜率优化

    Code: #include<bits/stdc++.h> #define maxn 1000000 #define ll long long #define x(i) (b[i+1]) ...

  6. 特权第一讲--Lesson 1 课程概述与如何学好FPGA

    FPGA的学习没有什么捷径,需要学习者多花时间和精力 . 1.设计输入 2.如何--对综合布局布线结果进行优化 3.如何--更有效地进行验证 4.如何--达到时序收敛 学习者需要用心去学习.去分析.去 ...

  7. Ubuntu安装及sshd服务安装,yum安装等总结

    vm网络选择自定义.指定的虚拟网络,自动桥连.   1.设置root初始密码 ubuntu安装好后,root初始密码(默认密码)不知道,需要设置.1.先用安装时候的用户登录进入系统2.输入:sudo ...

  8. C#[WinForm]实现自动更新

    C#[WinForm]实现自动更新 winform程序相对web程序而言,功能更强大,编程更方便,但软件更新却相当麻烦,要到客户端一台一台地升级,面对这个实际问题,在最近的一个小项目中,本人设计了一个 ...

  9. macOS 10.15 Catalina Apache设置:多个PHP版本

    第1部分:macOS 10.15 Catalina Web开发环境 在macOS上开发Web应用程序真是令人高兴.有许多设置开发环境的选项,包括广受欢迎的MAMP Pro,它在Apache,PHP和M ...

  10. field.getModifiers() 返回值

    field.getModifiers() 返回值 public static final  的值是 25 private 的值是2  测试如下 Class clazz=MyModel.class; F ...