理解javascript对象继承


Posted in Javascript onApril 17, 2016

先从一个问题进行研究深入,什么是javascript对象继承?

比如我们有一个“动物”对象的构造函数。

function animal() {
    this.type = '动物';
  }

还有一个“猫”对象的构造函数。

function cat(name,color) {
    this.name = name;
    this.color = color;
  }

我们知道猫也属于动物,如果这个猫对象想要继承动物对象的属性,我们该怎么做呢?

构造函数绑定
使用构造函数绑定是最简单的方法,使用call或者apply将父对象绑定在自对象上就可以了。

function cat(name,color) {
    animal.apply(this,arguments);
    this.name = name;
    this.color = color;
  }
  var cat1 = new cat("haha", 'red');
  console.log(cat1.type); //动物

不过这种方法比较少见。

拷贝继承
如果把父对象的所有属性和方法,拷贝进子对象,也可以实现继承。

function extend(Child, Parent) {

var p = Parent.prototype;


var c = Child.prototype;


for (var i in p) {



c[i] = p[i];



}


c.uber = p;   //桥梁作用

}

使用方法:

extend(cat, animal);
  var cat1 = new cat("haha","red");
  alert(cat1.type);   // 动物

原型继承(prototype)
相比于上面的直接绑定,原型继承的方法比较常见,对于prototype,我自己简单总结了一下。

每个函数都有一个prototype属性,这个属性是指向一个对象的引用,当使用new关键字创建新实例的时候,这个实例对象会从原型对象上继承属性和方法。

也就是说,如果将“猫”构造函数的prototype属性指向一个“动物”实例,那么再创建“猫”对象实例的时候,就继承了“动物”对象的属性和方法了。

继承实例

cat.prototype = new animal();
  cat.prototype.constructor = cat;
  var cat1 = new cat("haha","red");
  console.log(cat1.constructor == cat);  //true
  console.log(cat1.type); // 动物

1、代码第一行,我们将cat函数的prototype对象指向一个animal对象的实例(其中就包含了animal的type属性了)。

2、代码第二行是什么意思呢?

1)、首先,假如我们没有加这行代码,运行

    cat.prototype = new animal();
    console.log(cat.prototype.constructor == animal);  //true
也就是说,其实每个prototype对象都有一个constructor属性,指向它的构造函数。

2)、我们再看下面的代码

cat.prototype = new animal();
  var cat1 = new cat("haha", 'red');
  console.log(cat1.constructor == animal);  //true

由上我们看到实例cat1的构造函数是animal,所以,显然是不对的。。。cat1明明是new cat()才生成的,所以我们应该手动纠正。cat.prototype对象的constructor值改为cat。

3)、所以这也是我们应该注意的一点,如果我们替换了prototype对象,就应该手动纠正prototype对象的constructor属性。

    o.prototype = {};
    o.prototype.constructor = o;
直接继承prototype
由于在animal对象中,不变的属性可以直接写在animal.prototype中。然后直接让cat.prototype指向animal.prototype也就实现了继承。

现在我们先将animal对象改写成:

function animal() {
  }
  animal.prototype.type = '动物';

然后再实现继承:

cat.prototype = animal.prototype;
  cat.prototype.constructor = cat;
  var cat1 = new cat("haha","red");
  console.log(cat1.type); // 动物

与上一种方法相比,这种方法显得效率更高(没有创建animal实例),节省了空间。但是这样做正确吗?答案是不正确,我们继续看。

    cat.prototype = animal.prototype;
这行代码让cat.prototype和animal.prototype指向了同一个对象,所以如果改变了cat.prototype的某一个属性,都会反映到animal.prototype上,这显然不是我们想要看到的。

比如我们运行:

    console.log(animal.prototype.constructor == animal)  //false
结果看到是false,为什么呢?cat.prototype.constructor = cat;这一行就会把animal.prototype的constructor属性也改掉了。

利用空对象作为中介

var F = function(){};
  F.prototype = animal.prototype;
  cat.prototype = new F();
  cat.prototype.constructor = cat;

结合上面两种方法,因为F是空对象,所以几乎不占内存。这时修改cat的prototype对象,就不会影响到animal的prototype对象。

    console.log(animal.prototype.constructor == animal);   // true
然后我们将上面的方法封装一下:

function extend(Child, Parent) {

var F = function(){};


F.prototype = Parent.prototype;


Child.prototype = new F();


Child.prototype.constructor = Child;


Child.uber = Parent.prototype;

}

使用的时候,方法如下:  

extend(cat,animal);
  var cat1 = new cat("haha","red");
  console.log(cat1.type); // 动物

Child.uber = Parent.prototype; 这行代码就是个桥梁作用,让子对象的uber属性直接指向父对象的prototype属性,等于在自对象上打开一条叫uber的通道,让子对象的实例能够使用父对象的所有属性和方法。

以上就是对javascript对象继承我的理解,希望或多或少能够帮助到大家,谢谢大家的阅读。

Javascript 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
javascript创建数组之联合数组的使用方法示例
Dec 26 Javascript
Javascript 浮点运算精度问题分析与解决
Mar 26 Javascript
jquery向上向下取整适合分页查询
Sep 06 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
JS在onclientclick里如何控制onclick的执行
May 30 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
Vue非父子组件通信详解
Jun 12 Javascript
详解Vue2 添加对scss的支持
Jan 02 Javascript
js实现简单的贪吃蛇游戏
Apr 23 Javascript
用VsCode编辑TypeScript的实现方法
May 07 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 #Javascript
js如何准确获取当前页面url网址信息
Sep 13 #Javascript
基于javascript实现图片切换效果
Apr 17 #Javascript
非常棒的jQuery图片轮播效果
Apr 17 #Javascript
jQuery实现的倒计时效果实例小结
Apr 16 #Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
Apr 16 #Javascript
jQuery实现无限往下滚动效果代码
Apr 16 #Javascript
You might like
PHP中ADODB类详解
2008/03/25 PHP
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
Python实现的端口扫描功能示例
2018/04/08 Python
Windows上使用Python增加或删除权限的方法
2018/04/24 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
Python常见数据类型转换操作示例
2019/05/08 Python
Python assert语句的简单使用示例
2019/07/28 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
如何理解python面向对象编程
2020/06/01 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
什么是makefile? 如何编写makefile?
2012/08/08 面试题
初中英语教学反思
2014/01/25 职场文书
亮化工程实施方案
2014/03/17 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers
Win11应用商店打开闪退怎么解决? win11应用商店打不开的多种解决办法
2022/04/05 数码科技