一步步学习javascript基础篇(5):面向对象设计之对象继承(原型链继承)
上一篇介绍了对象创建的几种基本方式,今天我们看分析下对象的继承。
一、原型链继承
1.通过设置prototype指向“父类”的实例来实现继承。
function Obj1() {
this.name1 = "张三";
}
function Obj2() {
}
Obj2.prototype = new Obj1();
var t2 = new Obj2();
alert(t2.name1);
这里有个明显的缺点就是:(如果父类的属性是引用类型,那么我们在对象实例修改属性的时候会把原型中的属性修改,这样会在每个实例对象中改变数据,而这不是我们想要的效果)
function Obj1() {
this.arr = ["张三"];
}
function Obj2() {
}
Obj2.prototype = new Obj1();
var t2 = new Obj2();
alert(t2.arr);//打印“张三”
t2.arr[t2.arr.length] = "李四";
var t1 = new Obj2();
alert(t1.arr);//打印“张三,李四”
例:
function Obj1() {
this.arr = ["张三"];
}
function Obj2() {
}
Obj2.prototype = new Obj1();
var t2 = new Obj2();
alert(t2.arr);//打印“张三”
t2.arr[t2.arr.length] = "李四";
var t1 = new Obj2();
alert(t1.arr);//打印“张三,李四”
那我们怎样规避这种问题呢?接着往下看。
2. 利用构造函数来实现继承
function Obj1() {
this.arr = ["张三"];
}
function Obj2() {
Obj1.call(this);//【1.新增】
}
//Obj2.prototype = new Obj1();【2.注释这行】
var t2 = new Obj2();
alert(t2.arr);//打印“张三”
t2.arr[t2.arr.length] = "李四";
var t1 = new Obj2();
alert(t1.arr);//打印“张三,李四”
我们看到上面代码,就注释了一行,新增了以后。打印出来的效果完全不一样了。现在的arr属性是每个实例对象独有的了。(之前是定义到原型上的,而原型的属性对每个实例都是共享的)
例:
function Obj1() {
this.arr = ["张三"];
}
function Obj2() {
Obj1.call(this);//【1.新增】
}
//Obj2.prototype = new Obj1();【2.注释这行】
var t2 = new Obj2();
alert(t2.arr);//打印“张三”
t2.arr[t2.arr.length] = "李四";
var t1 = new Obj2();
alert(t1.arr);//打印“张三,李四”
同样,单纯的这种方式也是有问题的。因为我们这样就无法继承对象的方法了。如:
function Obj1() {
this.arr = ["张三"];
}
Obj1.prototype.sayHi = function () { alert(this.arr); }////【1.新增】
function Obj2() {
Obj1.call(this);
}
var t2 = new Obj2();
//t2里面是没有sayHi方法的
我们可以使用原型和构造的混用来解决,如下:
3.通过原型和构造来实现继承
function Obj1() {
this.arr = ["张三"];
}
Obj1.prototype.sayHi = function () { alert(this.arr); }
function Obj2() {
Obj1.call(this);
}
Obj2.prototype = new Obj1();//【1.新增】
var t2 = new Obj2();
t2.sayHi();
如上,通过构造函数中的 Obj1.call(this); 和设置原型属性 Obj2.prototype = new Obj1(); 结合使用,完美解决问题。
这里需要注意一个地方,如果把 Obj2.prototype = new Obj1(); 改成 Obj2.prototype = Obj1.prototype ; 的话,会有你想不到的问题。如:
function Obj1() {
this.arr = ["张三"];
}
Obj1.prototype.sayHi = function () { alert(this.arr); }
function Obj2() {
Obj1.call(this);
}
Obj2.prototype = Obj1.prototype;//【1.新增】
var t2 = new Obj2();
t2.constructor.prototype.sayHi = function () { alert("test") };//修改Obj2中的原型的方法
var t1 = new Obj1();
t1.sayHi();
//影响到了Obj1中的原型的方法。因为 Obj2.prototype = Obj1.prototype;让两个对象的原型指向了同一处。
//所以还是只能用Obj2.prototype = new Obj1();
例:
function Obj1() {
this.arr = ["张三"];
}
Obj1.prototype.sayHi = function () { alert(this.arr); }
function Obj2() {
Obj1.call(this);
}
Obj2.prototype = Obj1.prototype;//【1.新增】
var t2 = new Obj2();
t2.constructor.prototype.sayHi = function () { alert("test") };//修改Obj2中的原型的方法
var t1 = new Obj1();
t1.sayHi();
4.什么是原型链
如:
//*************Obj1****
function Obj1() {
this.arr = ["张三"];
}
Obj1.prototype.sayHi = function () { alert(this.arr); } //*************Obj2****
function Obj2() {
Obj1.call(this);
this.name = "张三";
}
Obj2.prototype = new Obj1();
Obj2.prototype.sayHi2 = function () { alert(this.name); }; //*************Obj3****
function Obj3() {
Obj2.call(this);
}
Obj3.prototype = new Obj2();
Obj3.prototype.sayHi3 = function () { }; //*******************
var t3 = new Obj3();
t3.sayHi();
Obj3继承Obj2,Obj2继承Obj1。我们的Obj3的实例对象访问sayHi的时候,会先去Obj3的实例对象中找sayHi方法(没找到),然后去Obj3的原型中找(没找到),然后去父类Obj2的原型中找(没找到),然后去Obj1的原型中找(找到了)。这个找的路径就是原型链。
(补充分割线20151230)
以上,我们在说继承的时候,我们都是 obj2.prototype = new obj1(); 原型指向父类构造函数。其实这样有一个问题。如:
function obj1() {
this.name2 = "张三";
}
obj1.prototype.sayhi = function () {
alert(this.name2);
} function obj2() {
obj1.call(this);//继承属性
}
obj2.prototype = new obj1();
var obj = new obj2();
我们看到name2这个属性,并不是我们想要在prototype中的prototype.name2中继承过来的。(感觉不是那么干净)
然而,我们可以:
function obj1() {
this.name2 = "张三";
}
obj1.prototype.sayhi = function () {
alert(this.name2);
} function obj2() {
obj1.call(this);//继承属性
}
//obj2.prototype = new obj1();
obj2.prototype = Object.create(obj1.prototype);//继承原型中的方法【E5中才有的一种新的对象创建方式】
var obj = new obj2();
这是学习记录,不是教程。文中错误难免,您可以指出错误,但请不要言辞刻薄。
原文链接:http://haojima.net/zhaopei/517.html
本文已同步至目录索引:一步步学习javascript
欢迎上海“程序猿/媛”、"攻城狮"入群:【沪猿】229082941 入群须知
欢迎对个人博客感兴趣的道友加入群:【嗨-博客】469075305 入群须知
如果您觉得文章对您有那么一点点帮助,那么麻烦您轻轻的点个赞,以资鼓励。
一步步学习javascript基础篇(5):面向对象设计之对象继承(原型链继承)的更多相关文章
- 一步步学习javascript基础篇(0):开篇索引
索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...
- 一步步学习javascript基础篇(3):Object、Function等引用类型
我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...
- 一步步学习javascript基础篇(4):面向对象设计之创建对象(工厂、原型和构造函数等模式)
前面我们介绍了可以通过Object构造函数或对象字面量都可以用来创建单个对象,但是如果需要创建多个对象的话,显然很多冗余代码. 接下来介绍几种模式来创建对象.不过在此之前,我们还是先来了解下 type ...
- 一步步学习javascript基础篇(8):细说事件
终于学到事件了,不知道为何听到“事件”就有一种莫名的兴奋.可能是之前的那些知识点过于枯燥无味吧,说起事件感觉顿时高大上了.今天我们就来好好分析下这个高大上的东西. 可以说,如果没有事件我们的页面就只能 ...
- 一步步学习javascript基础篇(1):基本概念
一.数据类型 数据类型 基本数据类型(五种) Undefined Null Boolean Number String 复杂数据类型(一种) Object Undefined:只有一个值undefin ...
- 一步步学习javascript基础篇(7):BOM和DOM
一.什么是BOM.什么是DOM BOM即浏览器对象模型,主要用了访问一些和网页无关的浏览器功能.如:window.location.navigator.screen.history等对象. DOM即文 ...
- 一步步学习javascript基础篇(6):函数表达式之【闭包】
回顾前面介绍过的三种定义函数方式 1. function sum (num1, num2) { return num1 + num2; } //函数声明语法定义 2. var sum = funct ...
- 一步步学习javascript基础篇(2):作用域和作用域链
作用域和作用域链 js的语法用法非常的灵活,且稍不注意就踩坑.这集来分析下作用域和作用域链.我们且从几道题目入手,您可以试着在心里猜想着答案. 问题一. if (true) { var str = & ...
- 一步步学习javascript基础篇(9):ajax请求的回退
需求1: ajax异步请求 url标识请求参数(也就是说复制url在新页面打开也会是ajax后的效果) ajax异步请求没问题,问题一般出在刷新url后请求的数据没了,这就是因为url没有记录参数.如 ...
随机推荐
- 3*n/2 - 2
求区间范围最小值最大值 用分治法(Divide and Conquer)求n元数组最小元与最大元,当n=1时,不用比较,最大元和最小元都是这个数:当n=2时,一次比较就可以找出两个数据元素的最大元和最 ...
- 【Java EE 学习 67 下】【OA项目练习】【SSH整合JBPM工作流】【JBPM项目实战】
一.SSH整合JBPM JBPM基础见http://www.cnblogs.com/kuangdaoyizhimei/p/4981551.html 现在将要实现SSH和JBPM的整合. 1.添加jar ...
- 基本术语表【WF】
术语 定义 activity(活动) Windows Workflow Foundation 中的程序行为单元. 可将单个活动组合在一起,形成更复杂的活动. activity action(活动操作) ...
- java接口
一.定义 Java接口(Interface),是一系列方法的声明,是一些方法特征的集合,一个接口只有方法的特征没有方法的实现,因此这些方法可以在不同的地方被不同的类实现,而这些实现可以具有不同的行为( ...
- 连接Linux下 XAMPP集成环境中部署的禅道的数据库MariaDB
用mysql数据库工具连接linuxmysql环境,但是会遇到连接失败的问题,如下所示: 这就需要涉及到另外的问题了,需要我们打开mysql的连接授权,具体的操作步骤如下: 1)在xshell里进入m ...
- 车销宝无线开单PDA 一款互联网+POS神器 无缝与电脑数据同步 无线POS开单解决方案
1.无线POS开单解决方案是基于后台系统开发的一套系统,它实现了采购入库退货.销售出库退货.盘点调拨等功能. 2.系统通过(WIFI.GPRS.GSM.蓝牙)实时后台库存.客户.商品.价格跟踪等信息, ...
- wpf 仿QQ图片查看器
参考博客 WPF下的仿QQ图片查看器 wpf图片查看器,支持鼠标滚动缩放拖拽 实现效果 主要参考的WPF下的仿QQ图片查看器,原博主只给出了部分代码. 没有完成的部分 1.右下角缩略图是原图不是缩略图 ...
- java复习集合类之List接口
List 为有序可重复列表 实现List接口的类主要是ArrayList 下面为ArrayList的测试代码 import java.util.ArrayList; public class demo ...
- ZOJ-3820 Building Fire Stations 题解
题目大意: 一棵树,在其中找两个点,使得其他点到这两个的距离的较小值的最大值的最小值及其方案. 思路: 首先显然一棵树的直径的中点到其他点的距离的最大值必定比其他点的小. 那么感性思考一下就将一棵树的 ...
- Android 照相 滤镜
android-image-filter 19种相片滤镜,使用也简单,all filters in file BitmapFilter.java : Bitmap newBitmap = Bitmap ...