关闭

JavaScript学习--Item14 使用prototype的几点注意事项

527人阅读 评论(0) 收藏 举报
分类:

1、在prototype上保存方法

不使用prototype进行JavaScript的编码是完全可行的,例如:

function User(name, passwordHash) {  
    this.name = name;  
    this.passwordHash = passwordHash;  
    this.toString = function() {  
        return "[User " + this.name + "]";  
    };  
    this.checkPassword = function(password) {  
        return hash(password) === this.passwordHash;  
    };  
}  

var u1 = new User(/* ... */);  
var u2 = new User(/* ... */);  
var u3 = new User(/* ... */);  

当创建了多个User类型的实例时,就存在问题了:不仅是name和passwordHash属性在每个实例上都存在,toString和checkPassword方法在每个实例上都有一份拷贝。就像下图表示的那样:

这里写图片描述

但是,当toString和checkPassword被定义在prototype上时,上图就变成下面这个样子了:

这里写图片描述

toString和checkPassword方法现在定义在了User.prototype对象上,也就意味着这两个方法只存在一份拷贝,并被所有的User实例共享。

也许你会认为将方法作为拷贝放在每个实例上,会节省方法查询的时间。(当方法定义在prototype上时,首先会在实例本身上寻找方法,如果没有找到才会去prototype上继续找)

但是在现代的JavaScript执行引擎中,对方法的查询进行了大量优化,所以这个查询时间几乎是不需要考虑的,那么将方法放在prototype对象上就节省了很多内存。

2、使用闭包来保存私有数据

JavaScript的对象系统从其语法上而言并不鼓励使用信息隐藏(Information Hiding)。因为当使用诸如this.name,this.passwordHash的时候,这些属性默认的访问级别就是public的,在任何位置都能够通过obj.name,obj.passwordHash来对这些属性进行访问。

在ES5环境中,也提供了一些方法来更方便的访问一个对象上所有的属性,比如Object.keys(),Object.getOwnPropertyNames()。所以,一些开发人员使用一些规约来定义JavaScript对象的私有属性,比如最典型的是使用下划线作为属性的前缀来告诉其他开发人员和用户这个属性是不应该被直接访问的。

但是这样做,并不能从根本上解决问题。其他开发人员和用户还是能够对带有下划线的属性进行直接访问。对于确实需要私有属性的场合,可以使用闭包进行实现。

从某种意义而言,在JavaScript中,闭包对于变量的访问策略和对象的访问策略是两个极端。闭包中的任何变量默认都是私有的,只有在函数内部才能访问这些变量。比如,可以将User类型实现如下:

function User(name, passwordHash) {  
    this.toString = function() {  
        return "[User " + name + "]";  
    };  
    this.checkPassword = function(password) {  
        return hash(password) === passwordHash;  
    };  
}  

此时,name和passwordHash都没有被保存为实例的属性,而是通过局部变量进行保存。然后根据闭包的访问规则,实例上的方法可以对它们进行访问,而在其它地方则不能。

使用这种模式的一个缺点是,利用了局部变量的方法都需要被定义在实例本身上,不能讲这些方法定义在prototype对象上。正如在Item34中讨论的那样,这样做的问题是会增加内存的消耗。但是在某些特别的场合下,即使将方法定义在实例上也是可行的。

3、实例状态只保存在实例对象上

一个类型的prototype和该类型的实例之间是”一对多“的关系。那么,需要确保实例相关的数据不会被错误地保存在prototype之上。比如,对于一个实现了树结构的类型而言,将它的子节点保存在该类型的prototype上就是不正确的:

function Tree(x) {  
    this.value = x;  
}  
Tree.prototype = {  
    children: [], // should be instance state!  
    addChild: function(x) {  
        this.children.push(x);  
    }  
};  

var left = new Tree(2);  
left.addChild(1);  
left.addChild(3);  

var right = new Tree(6);  
right.addChild(5);  
right.addChild(7);  

var top = new Tree(4);  
top.addChild(left);  
top.addChild(right);  

top.children; // [1, 3, 5, 7, left, right]  

当状态被保存到了prototype上时,所有实例的状态都会被集中地保存,在上面这种场景中显然是不正确的:本来属于每个实例的状态被错误地共享了。如下图所示:

这里写图片描述

正确的实现应该是这样的:

function Tree(x) {  
    this.value = x;  
    this.children = []; // instance state  
}  
Tree.prototype = {  
    addChild: function(x) {  
        this.children.push(x);  
    }  
};  

此时,实例状态的存储如下所示:

这里写图片描述

可见,当本属于实例的状态被共享到prototype上时,也许会产生问题。在需要在prototype上保存状态属性前,一定要确保该属性是能够被共享的。

总体而言,当一个属性是不可变(无状态)的属性时,就能将它保存在prototype对象上(比如方法能够被保存在prototype对象上就是因为这一点)。当然,有状态的属性也能够被放在prototype对象上,这要取决于具体的应用场景,典型的比如用来记录一个类型实例数量的变量。使用Java语言作为类比的话,这类能够存储在prototype对象上的变量就是Java中的类变量(使用static关键字修饰)。

4、避免继承标准类型

ECMAScript标准库不大,但是提供了一些重要的类型如Array,Function和Date。在一些场合下,你也许会考虑继承其中的某个类型来实现特定的功能,但是这种做法并不被鼓励。

比如为了操作一个目录,可以让目录类型继承Array类型如下:

function Dir(path, entries) {  
    this.path = path;  
    for (var i = 0, n = entries.length; i < n; i++) {  
        this[i] = entries[i];  
    }  
}  
Dir.prototype = Object.create(Array.prototype);  
// extends Array  

var dir = new Dir("/tmp/mysite", ["index.html", "script.js", "style.css"]);  
dir.length; // 0 

但是可以发现,dir.length的值是0,而不是期待中的3。

发生这种现象的原因在于:只有当对象是真正的Array类型时,length属性才会起作用。

在ECMAScript标准中,定义了一个不可见的内部属性被称为 [[class]]。该属性的值只是一个字符串,所以不要被误导认为JavaScript也实现了自己的类型系统。所以,对于Array类型,这个属性的值就是“Array”;对于Function类型,这个属性的值就是“Function”。下表是ECMAScript定义的所有[[class]] 值:

那么当对象的类型确实是Array时,length属性的特别之处就在于:length的值会和该对象中被索引的属性个数保持一致。比如对于一个数组对象arr,arr[0]和arr[1]就表示该对象有两个被索引的属性,那么length的值就是2。当添加了arr[2]的时候,length的值会被自动同步成3。同样地,当设置length值为2时,arr[2]会被自动设置成undefined。

但是当继承Array类型并创建实例时,该实例的 [[class]] 属性并不是Array,而是Object。因此length属性不能正确的工作。

在JavaScript中,也提供了用于查询 [[class]] 属性的方法,即使用Object.prototype.toString方法:

var dir = new Dir("/", []);  
Object.prototype.toString.call(dir); // "[object Object]"  
Object.prototype.toString.call([]); // "[object Array]" 

因此,更好的实现方法是使用组合而不是继承:

function Dir(path, entries) {  
    this.path = path;  
    this.entries = entries; // array property  
}  
Dir.prototype.forEach = function(f, thisArg) {  
    if (typeof thisArg === "undefined") {  
        thisArg = this;  
    }  
    this.entries.forEach(f, thisArg);  
};  

以上代码将不再使用继承,而是将一部分功能代理给内部的entries属性来实现,该属性的值是一个Array类型对象。

ECMAScript标准库中,大部分的构造函数都会依赖内部属性值如 [[class]] 来实现正确的行为。对于继承这些标准类型的子类型,无法保证它们的行为是正确的。因此,不要继承ECMAScript标准库中的类型如:
Array, Boolean, Date, Function, Number,RegExp,String

(function () {('pre.prettyprint code').each(function () { var lines = (this).text().split(\n).length;varnumbering = $('
    ').addClass('pre-numbering').hide(); (this).addClass(hasnumbering).parent().append(numbering); for (i = 1; i
0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

JavaScript学习--Item15 prototype原型和原型链详解

用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了,...
  • z742182637
  • z742182637
  • 2016-05-30 10:08
  • 4393

js中的prototype有什么作用?

1、 prototype对象是实现面向对象的一个重要机制。每个函数也是一个对象,它们对应的类就是 function,每个函数对象都具有一个子对象prototype。Prototype ...
  • qq_34471305
  • qq_34471305
  • 2017-05-10 20:35
  • 135

js中prototype的陷阱

原型陷阱 //当我们对原型对象执行完全替换时,可能会触发原型链中某种异常 //prototype.constructor属性是不可靠的 function Dog(){ this...
  • wuzhe128520
  • wuzhe128520
  • 2016-05-05 22:51
  • 391

js:深入prototype(下:原型重写)

//当属性和方法特别多时,编写起来不是很方便,可以通过json的格式来编写 //由于原型重写,而且没有通过Person.prototype来指定,此时的constructor不会再指向Person而是...
  • Magneto7
  • Magneto7
  • 2014-05-03 16:02
  • 2568

JavaScript prototype原型和原型链详解

用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了,...
  • i10630226
  • i10630226
  • 2015-10-21 14:25
  • 1464

JS经常出在面试的问题,闭包,prototype和constructor

昨天面试,面试官问我JS好不好,我说非常好。面试官说那好,闭包是什么,跟我介绍一下吧~ 说实话,这不是我第一次碰到这样的问题。至少是第三次,然而我仍然没有正视过这个问题。我正视了一些C++问题比如...
  • crazygyl
  • crazygyl
  • 2014-03-21 18:58
  • 1277

JavaScript中数组Array.prototype的常用的方法总结

Array构造函数的API,我们可以通过控制台打印Array.prototype可以知道有以下这些方法。这是Array的原型对象的所有方法,对数组而言是可以继承所有的这些方法的: 接下来,我们就以12...
  • SpicyBoiledFish
  • SpicyBoiledFish
  • 2017-04-26 11:40
  • 461

JS 原型污染和猴子补丁

上两篇介绍了原型对象和原型链: JavaScript对象创建模式:http://blog.csdn.net/hongse_zxl/article/details/44595809 深入理解...
  • lishk314
  • lishk314
  • 2015-10-27 15:51
  • 780

实现javaScript对象的"继承"的两种方法(prototype与闭包)

实现javaScript对象的"继承"的两种方法(prototype与闭包)
  • canot
  • canot
  • 2016-02-28 16:13
  • 1288

js 构造函数(construction)与原型(prototype)

1.js原型 java有class和instance,js只有构造函数(function Cat(name,age){this.name=name;this.age=age}),为了实现数据共享和抽象...
  • tang7837010
  • tang7837010
  • 2014-12-24 11:21
  • 1009
    个人资料
    • 访问:345627次
    • 积分:5797
    • 等级:
    • 排名:第5188名
    • 原创:289篇
    • 转载:19篇
    • 译文:0篇
    • 评论:19条
    文章分类
    最新评论