JavaScript程序中实现继承特性的方式总结


Posted in Javascript onJune 24, 2016

概述
JavaScript的所有对象,都有自己的继承链。也就是说,每个对象都继承另一个对象,该对象称为“原型”(prototype)对象。只有null除外,它没有自己的原型对象。

原型对象的重要性在于,如果A对象是B对象的原型,那么B对象可以拿到A对象的所有属性和方法。Object.getPrototypof方法用于获取当前对象的原型对象。

var p = Object.getPrototypeOf(obj);

上面代码中,对象p就是对象obj的原型对象。

Object.create方法用于生成一个新的对象,继承指定对象。

var obj = Object.create(p);

上面代码中,新生成的obj对象的原型就是对象p。

非标准的__proto__属性(前后各两个下划线),可以改写某个对象的原型对象。但是,应该尽量少用这个属性,而是用Object.getPrototypeof()和Object.setPrototypeOf(),进行原型对象的读写操作。

var obj = {};
var p = {};

obj.__proto__ = p;
Object.getPrototypeOf(obj) === p // true

上面代码通过__proto__属性,将p对象设为obj对象的原型。

下面是一个实际的例子。

var a = {x: 1};
var b = {__proto__: a};
b.x // 1

上面代码中,b对象通过__proto__属性,将自己的原型对象设为a对象,因此b对象可以拿到a对象的所有属性和方法。b对象本身并没有x属性,但是JavaScript引擎通过__proto__属性,找到它的原型对象a,然后读取a的x属性。

new命令通过构造函数新建实例对象,实质就是将实例对象的原型绑定构造函数的prototype属性,然后在实例对象上执行构造函数。

var o = new Foo();

// 等同于
var o = new Object();
o.__proto__ = Foo.prototype;
Foo.call(o);

原型对象自己的__proto__属性,也可以指向其他对象,从而一级一级地形成“原型链”(prototype chain)。

var a = { x: 1 };
var b = { __proto__: a };
var c = { __proto__: b };

c.x // 1

需要注意的是,一级级向上,在原型链寻找某个属性,对性能是有影响的。所寻找的属性在越上层的原型对象,对性能的影响越大。如果寻找某个不存在的属性,将会遍历整个原型链。

this的动作指向
不管this在哪里定义,使用的时候,它总是指向当前对象,而不是原型对象。

var o = {
 a: 2,
 m: function(b) {
  return this.a + 1;
 }
};

var p = Object.create(o);
p.a = 12;

p.m() // 13

上面代码中,p对象的m方法来自它的原型对象o。这时,m方法内部的this对象,不指向o,而是指向p。

构造函数的继承
这个小节介绍,如何让一个构造函数,继承另一个构造函数。

假定有一个Shape构造函数。

function Shape() {
 this.x = 0;
 this.y = 0;
}

Shape.prototype.move = function (x, y) {
 this.x += x;
 this.y += y;
 console.info('Shape moved.');
};
Rectangle构造函数继承Shape。

function Rectangle() {
 Shape.call(this); // 调用父类构造函数
}
// 另一种写法
function Rectangle() {
 this.base = Shape;
 this.base();
}

// 子类继承父类的方法
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

var rect = new Rectangle();

rect instanceof Rectangle // true
rect instanceof Shape // true

rect.move(1, 1) // 'Shape moved.'

上面代码表示,构造函数的继承分成两部分,一部分是子类调用父类的构造方法,另一部分是子类的原型指向父类的原型。

上面代码中,子类是整体继承父类。有时,只需要单个方法的继承,这时可以采用下面的写法。

ClassB.prototype.print = function() {
 ClassA.prototype.print.call(this);
 // some code
}

上面代码中,子类B的print方法先调用父类A的print方法,再部署自己的代码。这就等于继承了父类A的print方法。

__proto__属性
__proto__属性指向当前对象的原型对象,即构造函数的prototype属性。

var obj = new Object();

obj.__proto__ === Object.prototype
// true
obj.__proto__ === obj.constructor.prototype
// true

上面代码首先新建了一个对象obj,它的__proto__属性,指向构造函数(Object或obj.constructor)的prototype属性。所以,两者比较以后,返回true。

因此,获取实例对象obj的原型对象,有三种方法。

  • obj.__proto__
  • obj.constructor.prototype
  • Object.getPrototypeOf(obj)

上面三种方法之中,前两种都不是很可靠。最新的ES6标准规定,__proto__属性只有浏览器才需要部署,其他环境可以不部署。而obj.constructor.prototype在手动改变原型对象时,可能会失效。

var P = function () {};
var p = new P();

var C = function () {};
C.prototype = p;
var c = new C();

c.constructor.prototype === p // false

上面代码中,C构造函数的原型对象被改成了p,结果c.constructor.prototype就失真了。所以,在改变原型对象时,一般要同时设置constructor属性。

C.prototype = p;
C.prototype.constructor = C;

c.constructor.prototype === p // true

所以,推荐使用第三种Object.getPrototypeOf方法,获取原型对象。该方法的用法如下。

var o = new Object();

Object.getPrototypeOf(o) === Object.prototype
// true

可以使用Object.getPrototypeOf方法,检查浏览器是否支持__proto__属性,老式浏览器不支持这个属性。

Object.getPrototypeOf({ __proto__: null }) === null

上面代码将一个对象的__proto__属性设为null,然后使用Object.getPrototypeOf方法获取这个对象的原型,判断是否等于null。如果当前环境支持__proto__属性,两者的比较结果应该是true。

有了__proto__属性,就可以很方便得设置实例对象的原型了。假定有三个对象machine、vehicle和car,其中machine是vehicle的原型,vehicle又是car的原型,只要两行代码就可以设置。

vehicle.__proto__ = machine;
car.__proto__ = vehicle;

下面是一个实例,通过__proto__属性与constructor.prototype属性两种方法,分别读取定义在原型对象上的属性。

Array.prototype.p = 'abc';
var a = new Array();

a.__proto__.p // abc
a.constructor.prototype.p // abc

显然,__proto__看上去更简洁一些。

通过构造函数生成实例对象时,实例对象的__proto__属性自动指向构造函数的prototype对象。

var f = function (){};
var a = {};

f.prototype = a;
var o = new f();

o.__proto__ === a
// true

属性的继承
属性分成两种。一种是对象自身的原生属性,另一种是继承自原型的继承属性。

对象的原生属性
对象本身的所有属性,可以用Object.getOwnPropertyNames方法获得。

Object.getOwnPropertyNames(Date)
// ["parse", "arguments", "UTC", "caller", "name", "prototype", "now", "length"]

对象本身的属性之中,有的是可以枚举的(enumerable),有的是不可以枚举的。只获取那些可以枚举的属性,使用Object.keys方法。

Object.keys(Date) // []
hasOwnProperty()

hasOwnProperty方法返回一个布尔值,用于判断某个属性定义在对象自身,还是定义在原型链上。

Date.hasOwnProperty('length')
// true

Date.hasOwnProperty('toString')
// false

hasOwnProperty方法是JavaScript之中唯一一个处理对象属性时,不会遍历原型链的方法。

对象的继承属性
用Object.create方法创造的对象,会继承所有原型对象的属性。

var proto = { p1: 123 };
var o = Object.create(proto);

o.p1 // 123
o.hasOwnProperty("p1") // false

获取所有属性
判断一个对象是否具有某个属性(不管是自身的还是继承的),使用in运算符。

"length" in Date // true
"toString" in Date // true

获得对象的所有可枚举属性(不管是自身的还是继承的),可以使用for-in循环。

var o1 = {p1: 123};

var o2 = Object.create(o1,{
 p2: { value: "abc", enumerable: true }
});

for (p in o2) {console.info(p);}
// p2
// p1

为了在for...in循环中获得对象自身的属性,可以采用hasOwnProperty方法判断一下。

for ( var name in object ) {
 if ( object.hasOwnProperty(name) ) {
  /* loop code */
 }
}

获得对象的所有属性(不管是自身的还是继承的,以及是否可枚举),可以使用下面的函数。

function inheritedPropertyNames(obj) {
 var props = {};
 while(obj) {
  Object.getOwnPropertyNames(obj).forEach(function(p) {
   props[p] = true;
  });
  obj = Object.getPrototypeOf(obj);
 }
 return Object.getOwnPropertyNames(props);
}

用法如下:

inheritedPropertyNames(Date)
// ["caller", "constructor", "toString", "UTC", "call", "parse", "prototype", "__defineSetter__", "__lookupSetter__", "length", "arguments", "bind", "__lookupGetter__", "isPrototypeOf", "toLocaleString", "propertyIsEnumerable", "valueOf", "apply", "__defineGetter__", "name", "now", "hasOwnProperty"]

对象的拷贝
如果要拷贝一个对象,需要做到下面两件事情。

确保拷贝后的对象,与原对象具有同样的prototype原型对象。
确保拷贝后的对象,与原对象具有同样的属性。
下面就是根据上面两点,编写的对象拷贝的函数。

function copyObject(orig) {
 var copy = Object.create(Object.getPrototypeOf(orig));
 copyOwnPropertiesFrom(copy, orig);
 return copy;
}

function copyOwnPropertiesFrom(target, source) {
 Object
 .getOwnPropertyNames(source)
 .forEach(function(propKey) {
  var desc = Object.getOwnPropertyDescriptor(source, propKey);
  Object.defineProperty(target, propKey, desc);
 });
 return target;
}

多重继承
JavaScript不提供多重继承功能,即不允许一个对象同时继承多个对象。但是,可以通过变通方法,实现这个功能。

function M1(prop) {
 this.hello = prop;
}

function M2(prop) {
 this.world = prop;
}

function S(p1, p2) {
 this.base1 = M1;
 this.base1(p1);
 this.base2 = M2;
 this.base2(p2);
}
S.prototype = new M1();

var s = new S(111, 222);
s.hello // 111
s.world // 222

上面代码中,子类S同时继承了父类M1和M2。当然,从继承链来看,S只有一个父类M1,但是由于在S的实例上,同时执行M1和M2的构造函数,所以它同时继承了这两个类的方法。

Javascript 相关文章推荐
javascript iframe内的函数调用实现方法
Jul 19 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
Dec 15 Javascript
jquery插件开发注意事项小结
Jun 04 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
Aug 05 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
Sep 04 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
js实现产品缩略图效果
Mar 10 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
微信小程序实现多图上传
Jun 19 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 #Javascript
JS全局变量和局部变量最新解析
Jun 24 #Javascript
jQuery插件passwordStrength密码强度指标详解
Jun 24 #Javascript
jquery选择器中的空格与大于号>、加号+与波浪号~的区别介绍
Jun 24 #Javascript
jquery表单插件Autotab使用方法详解
Jun 24 #Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
Jun 24 #Javascript
jQuery下拉框的简单应用
Jun 24 #Javascript
You might like
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
php实现读取内存顺序号
2015/03/29 PHP
PHP基于PDO实现的SQLite操作类【包含增删改查及事务等操作】
2017/06/21 PHP
PHP设计模式之模板方法模式定义与用法详解
2018/04/02 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
JavaScript jquery及AJAX小结
2016/01/24 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
2019/05/30 Javascript
JavaScript中将值转换为字符串的五种方法总结
2019/06/06 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
深入了解Vue.js 混入(mixins)
2020/07/23 Javascript
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
python登录pop3邮件服务器接收邮件的方法
2015/04/30 Python
python视频按帧截取图片工具
2019/07/23 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
Python里面如何拷贝一个对象
2014/02/17 面试题
会计专业自荐信范文
2013/12/02 职场文书
卫生巾广告词
2014/03/18 职场文书
小学生评语大全
2014/04/18 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python
5道关于python基础 while循环练习题
2021/11/27 Python
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android