对象的继承(原型链)

目录 [隐藏]

原型对象概述 构造函数的缺点 prototype 属性的作用 原型链 constructor 属性 instanceof 运算符 构造函数的继承 多重继承 模块 基本的实现方法 封装私有变量:构造函数的写法 封装私有变量:立即执行函数的写法 模块的放大模式 输入全局变量 参考链接

1.原型对象概述 每新建一个实例,就会新建一个meow方法。这既没有必要,又浪费系统资源,因为所有meow方法都是同样的行为,完全应该共享。

这个问题的解决方法,就是 JavaScript 的原型对象(prototype)

2.prototype 属性的作用 原型对象的作用,就是定义所有实例对象共享的属性和方法。这也是它被称为原型对象的原因,而实例对象可以视作从原型对象衍生出来的子对象。 JavaScript 继承机制的设计思想就是,原型对象的所有属性和方法,都能被实例对象共享。

JavaScript 规定,每个函数都有一个prototype属性,指向一个对象 function f() {} typeof f.prototype // "object"

function Animal(name) { this.name = name; } Animal.prototype.color = 'white';

var cat1 = new Animal('大毛'); var cat2 = new Animal('二毛');

cat1.color // 'white' cat2.color // 'white 构造函数Animal的prototype属性,就是实例对象cat1和cat2的原型对象。

原型对象上添加一个color属性,结果,实例对象都共享了该属性

Animal.prototype.color = 'yellow';

cat1.color // "yellow" cat2.color // "yellow" 上面代码中,原型对象的color属性的值变为yellow,两个实例对象的color属性立刻跟着变了。这是因为实例对象其实没有color属性,都是读取原型对象的color属性。也就是说,

当实例对象本身没有某个属性或方法的时候,它会到原型对象去寻找该属性或方法。如果实例对象自身就有某个属性或方法,它就不会再去原型对象寻找这个属性或方法。这就是原型对象的特殊之处。

3.原型链 JavaScript 规定,所有对象都有自己的原型对象(prototype)。一方面,任何一个对象,都可以充当其他对象的原型;另一方面,由于原型对象也是对象,所以它也有自己的原型。因此,就会形成一个“原型链”(prototype chain):对象到原型,再到原型的原型

如果一层层地上溯,所有对象的原型最终都可以上溯到Object.prototype,即Object构造函数的prototype属性。也就是说,所有对象都继承了Object.prototype的属性。这就是所有对象都有valueOf和toString方法的原因,因为这是从Object.prototype继承的

var MyArray = function () {};

MyArray.prototype = new Array(); MyArray.prototype.constructor = MyArray;

var mine = new MyArray(); mine.push(1, 2, 3); mine.length // 3 mine instanceof Array // true

构造函数的prototype属性指向一个数组,就意味着实例对象可以调用数组方法。

mine是构造函数MyArray的实例对象,由于MyArray.prototype指向一个数组实例,使得mine可以调用数组方法(这些方法定义在数组实例的prototype对象上面)

3.constructor 属性 prototype对象有一个constructor属性,默认指向prototype对象所在的构造函数 function P() {} P.prototype.constructor === P // true 由于constructor属性定义在prototype对象上面,意味着可以被所有实例对象继承

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

p.constructor === P // true p.constructor === P.prototype.constructor // true p.hasOwnProperty('constructor') // false 上面代码中,p是构造函数P的实例对象,但是p自身没有constructor属性,该属性其实是读取原型链上面的P.prototype.constructor属性

3.1作用 3.1.1可以得知某个实例对象,到底是哪一个构造函数产生的。 3.1.2另一方面,有了constructor属性,就可以从一个实例对象新建另一个实例 function Constr() {} var x = new Constr();

var y = new x.constructor(); y instanceof Constr // true 3.1.3在实例方法中,调用自身的构造函数成为可能 Constr.prototype.createCopy = function () { return new this.constructor(); };

3.2constructor属性表示原型对象与构造函数之间的关联关系,如果修改了原型对象,一般会同时修改constructor属性,防止引用的时候出错。 function Person(name) { this.name = name; }

Person.prototype.constructor === Person // true

Person.prototype = { method: function () {} };

Person.prototype.constructor === Person // false Person.prototype.constructor === Object // true

// 坏的写法 C.prototype = { method1: function (...) { ... }, // ... };

// 好的写法 C.prototype = { constructor: C, method1: function (...) { ... }, // ... };

// 更好的写法 C.prototype.method1 = function (...) { ... }; 上面代码中,要么将constructor属性重新指向原来的构造函数,要么只在原型对象上添加方法,这样可以保证instanceof运算符不会失真。

如果不能确定constructor属性是什么函数,还有一个办法:通过name属性,从实例得到构造函数的名称。

function Foo() {} var f = new Foo(); f.constructor.name // "Foo"

4.instanceof 运算符 instanceof运算符返回一个布尔值,表示对象是否为某个构造函数的实例 instanceof运算符的左边是实例对象,右边是构造函数。它会检查右边构建函数的原型对象(prototype),是否在左边对象的原型链上。因此,下面两种写法是等价的。

v instanceof Vehicle // 等同于 Vehicle.prototype.isPrototypeOf(v)

由于instanceof检查整个原型链,因此同一个实例对象,可能会对多个构造函数都返回true。

var d = new Date(); d instanceof Date // true d instanceof Object // true Null都为false

注意,instanceof运算符只能用于对象,不适用原始类型的值。

var s = 'hello'; s instanceof String // false

上面代码中,字符串不是String对象的实例(因为字符串不是对象),所以返回false。

此外,对于undefined和null,instanceOf运算符总是返回false

上面代码中,字符串不是String对象的实例(因为字符串不是对象),所以返回false。

此外,对于undefined和null,instanceOf运算符总是返回false

5.构造函数的继承 5.1在子类的构造函数中,调用父类的构造函数 Sub是子类的构造函数,this是子类的实例。在实例上调用父类的构造函数Super,就会让子类实例具有父类实例的属性

5.2是让子类的原型指向父类的原型,这样子类就可以继承父类原型 Sub.prototype = Object.create(Super.prototype); Sub.prototype.constructor = Sub; Sub.prototype.method = '...'; 上面代码中,Sub.prototype是子类的原型,要将它赋值为Object.create(Super.prototype),而不是直接等于Super.prototype。否则后面两行对Sub.prototype的操作,会连父类的原型Super.prototype一起修改掉。

5.3Sub.prototype等于一个父类实例Sub.prototype = new Super();

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

ClassB.prototype.print = function() { ClassA.prototype.print.call(this); // some code } 上面代码中,子类B的print方法先调用父类A的print方法,再部署自己的代码。这就等于继承了父类A的print方法

6.多重继承 function M1() { this.hello = 'hello'; }

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

function S() { M1.call(this); M2.call(this); }

// 继承 M1 S.prototype = Object.create(M1.prototype); // 继承链上加入 M2 Object.assign(S.prototype, M2.prototype);

// 指定构造函数 S.prototype.constructor = S;

var s = new S(); s.hello // 'hello' s.world // 'world' 上面代码中,子类S同时继承了父类M1和M2。这种模式又称为 Mixin(混入

7.模块 JavaScript 不是一种模块化编程语言,ES6 才开始支持“类”和“模块”。下面介绍传统的做法,如何利用对象实现模块的效果。

7.1基本的实现方法(对象) 模块是实现特定功能的一组属性和方法的封装 简单的做法是把模块写成一个对象,所有的模块成员都放到这个对象里面。

var module1 = new Object({ _count : 0, m1 : function (){ //... }, m2 : function (){ //... } }); 上面的函数m1和m2,都封装在module1对象里。使用的时候,就是调用这个对象的属性。

module1.m1(); 但是,这样的写法会暴露所有模块成员,内部状态可以被外部改写。比如,外部代码可以直接改变内部计数器的值。

module1._count = 5

7.2封装私有变量:构造函数的写法 function StringBuilder() { var buffer = [];

this.add = function (str) {

buffer.push(str);

};

this.toString = function () {

return buffer.join('');

};

} 上面代码中,buffer是模块的私有变量。一旦生成实例对象,外部是无法直接访问buffer的。但是,这种方法将私有变量封装在构造函数中,导致构造函数与实例对象是一体的,总是存在于内存之中。无法在使用完成后清除。这意味着,构造函数有双重作用,既用来塑造实例对象,又用来保存实例对象的数据,违背了构造函数与实例对象在数据上相分离的原则(即实例对象的数据,不应该保存在实例对象以外)。同时,非常耗费内存。

function StringBuilder() { this._buffer = []; }

StringBuilder.prototype = { constructor: StringBuilder, add: function (str) {

this._buffer.push(str);

}, toString: function () {

return this._buffer.join('');

} }; 这种方法将私有变量放入实例对象中,好处是看上去更自然,但是它的私有变量可以从外部读写,不是很安全

7.3封装私有变量:立即执行函数的写法 将相关的属性和方法封装在一个函数作用域里面,可以达到不暴露私有成员的目的 将相关的属性和方法封装在一个函数作用域里面,可以达到不暴露私有成员的目的。

var module1 = (function () { var _count = 0; var m1 = function () { //... }; var m2 = function () { //... }; return { m1 : m1, m2 : m2 }; })(); 使用上面的写法,外部代码无法读取内部的_count变量。

console.info(module1._count); //undefined 上面的module1就是 JavaScript 模块的基本写法。下面,再对这种写法进行加工。

7.4模块的放大模式

如果一个模块很大,必须分成几个部分,或者一个模块需要继承另一个模块,这时就有必要采用“放大模式”(augmentation)。

var module1 = (function (mod){ mod.m3 = function () { //... }; return mod; })(module1); 上面的代码为module1模块添加了一个新方法m3(),然后返回新的module1模块

在浏览器环境中,模块的各个部分通常都是从网上获取的,有时无法知道哪个部分会先加载。如果采用上面的写法,第一个执行的部分有可能加载一个不存在空对象,这时就要采用"宽放大模式"(Loose augmentation)。

var module1 = (function (mod) { //... return mod; })(window.module1 || {}); 与"放大模式"相比,“宽放大模式”就是“立即执行函数”的参数可以是空对象

7.5输入全局变量 独立性是模块的重要特点,模块内部最好不与程序的其他部分直接交互。

为了在模块内部调用全局变量,必须显式地将其他变量输入模块。

var module1 = (function ($, YAHOO) { //... })(jQuery, YAHOO); 上面的module1模块需要使用 jQuery 库和 YUI 库,就把这两个库(其实是两个模块)当作参数输入module1。 这样做除了保证模块的独立性,还使得模块之间的依赖关系变得明显。 (function($, window, document) {

function go(num) { }

function handleEvents() { }

function initialize() { }

function dieCarouselDie() { }

//attach to the global scope window.finalCarousel = {

init : initialize,
destroy : dieCarouselDie

}

})( jQuery, window, document ); 上面代码中,finalCarousel对象输出到全局,对外暴露init和destroy接口,内部方法go、handleEvents、initialize、dieCarouselDie都是外部无法调用的

原文链接:segmentfault.com

上一篇:ES 6 新增的块级作用域let
下一篇:浅析js的工厂函数、构造函数

相关推荐

  • 🕵️‍♀️由原型到JS中的“模拟类”

    讲述了有关 JavaScript 中原型相关知识,又引出了 JavaScript 中的“类“究竟是什么?,以及一系列相关问题。 一、前置知识 1、JavaScript 的面向对象(OOP) ​ 面向...

    3 个月前
  • (对象为VaR在CoffeeScript的关键)?[重复]

    fancy(https://stackoverflow.com/users/666564/fancy)提出了一个问题:for (var key in object) in CoffeeScript? ...

    2 年前
  • 高程读书笔记 第六章 面向对象程序设计

    本章内容 ECMA262把对象定义为:无序属性的集合,其属性可以包含基本值、对象或者函数 理解对象 创建对象 创建自定义对象的最简单方式就是创建一个Object的实例,再为它添加属性和方...

    2 年前
  • 高程3版中《寄生组合式继承》中的一个错误

    前言 最近一直在回顾js继承方式,在阅读《高级程序设计》第3版 的时候遇到一个问题,下面仅个人看法,如果有理解错误或者不同看法,欢迎一起探讨: 正文 何谓寄生组合继承,实质上分为两步: 1...

    2 年前
  • 面试题3:ES5、ES6两种方式实现继承

    写一个类Person,拥有属性age和name,拥有方法say(something)再写一个类Superman,继承Person,拥有自己的属性power,拥有自己的方法fly(height) ...

    2 个月前
  • 面试官:说说原型链和继承吧

    JavaScript 中没有类的概念的,主要通过原型链来实现继承。通常情况下,继承意味着复制操作,然而 JavaScript 默认并不会复制对象的属性,相反,JavaScript 只是在两个对象之间创...

    2 个月前
  • 面试官问:JS的继承

    用过的读者知道,经常用继承。 点击这里查看 React github源码(https://github.com/facebook/react/blob/master/packages/react...

    1 年前
  • 面试专用:js原型和原型链具体是指什么

    本人看了很多有关js原型和原型链的文章,但是感觉总是介绍的不完整或者不够清晰,所以特地根据自己所掌握的知识将这些内容梳理一下 1、首先我先来介绍一下什么是对象及在不同语言中是怎么定义的 对象:比如说在...

    3 个月前
  • 面对面讲述JavaScript之继承的实现

    继承:继承可以使得子类具有父类的属性和方法或者重新定义、追加属性和方法等。在JavaScript中实现继承的过程中要注意对引用数据类型的处理和对原型上的属性和方法的继承。

    3 个月前
  • 面对对象编程

    一、创建对象 1.构造函数 var Vehicle = function () { this.price = 1000; }; var v = new Vehicle(); v.price // 1...

    1 年前

官方社区

扫码加入 JavaScript 社区