跟我学习javascript的prototype使用注意事项_javascript技巧

一、在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对象上就节省了很多内存。

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

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中讨论的那样,这样做的问题是会增加内存的消耗。但是在某些特别的场合下,即使将方法定义在实例上也是可行的。

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

一个类型的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关键字修饰)。

四、避免继承标准类型

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

以上就是对使用prototype的几点注意事项进行总结,希望可以帮助大家正确的使用prototype。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript
prototype
,以便于您获取更多的相关知识。

时间: 2016-11-17

跟我学习javascript的prototype使用注意事项_javascript技巧的相关文章

学习JavaScript设计模式之装饰者模式_javascript技巧

有时我们不希望某个类天生就非常庞大,一次性包含许多职责.那么我们就可以使用装饰着模式. 装饰着模式可以动态地给某个对象添加一些额外的职责,从而不影响这个类中派生的其他对象. 装饰着模式将一个对象嵌入另一个对象之中,实际上相当于这个对象被另一个对象包装起来,形成一条包装链. 一.不改动原函数的情况下,给该函数添加些额外的功能 1. 保存原引用 window.onload = function() { console.log(1); }; var _onload = window.onload ||

学习javascript面向对象 实例讲解面向对象选项卡_javascript技巧

本文实例讲解了最简单的面向对象选项卡实现方法,分享给大家供大家参考,具体内容如下 效果图: 1.功能说明 点击三个按钮分别显示对应的选项卡 2.html代码说明 <div class="box" id="box"> <ul class="list"> <li class="in_active">第一张选项卡</li> <li class="in">

跟我学习javascript的函数和函数表达式_javascript技巧

1.函数声明与函数表达式 在ECMAScript中,创建函数的最常用的两个方法是函数表达式和函数声明,两者期间的区别是有点晕,因为ECMA规范只明确了一点:函数声明必须带有标示符(Identifier)(就是大家常说的函数名称),而函数表达式则可以省略这个标示符: 函数声明:function 函数名称 (参数:可选){ 函数体 } 函数表达式:function 函数名称(可选)(参数:可选){ 函数体 } 所以,可以看出,如果不声明函数名称,它肯定是表达式,可如果声明了函数名称的话,如何判断是函

学习JavaScript设计模式之责任链模式_javascript技巧

一.定义 责任链模式:使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系,将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止. 二.示例 假设这么一个场景: 我们负责一个售卖手机的电商网站,经过分别缴纳500元定金和200元定金的两轮预定后,到了正式购买阶段.针对预定用户实行优惠,支付过500元定金的用户会收到100元的商城优惠券,支付过200元定金的用户会收到50元的商城优惠券,没有支付定金的用户归为普通购买,且在库存有限的情况下不一定保证买到. /*

20条学习javascript的编程规范的建议_javascript技巧

1.使用js文件管理代码 所有代码尽量放在js文件中,然后再html文件中使用script引入,引入时注意放在body标签后面,并且不使用type或者language. 2.书写缩进 使用4个空白格缩进,注意不要使用tab键进行缩进. 3.断句 注意行长,每行不超过80个字符,超过时要进行适当断句,断句应该再操作符后面进行,最理想的是在逗号(,)后面进行断句,断句后下一行使用8格缩进. 4.注解 一般使用单行注释,块注释一般用于文档. 5.变量声明 所有变量使用之前先声明,未声明的变量会自动作为

JavaScript数据类型转换的注意事项_javascript技巧

1.字符串的不可变性  字符串定义了后,会一直占据内存空间,企鹅该处内存空间(栈)不可被重新赋值. 2.短路运算 ||.&& 二元运算符,返回参与运算的操作数的原值(原数据类型和原数据), 运算结束后,返回导致运算结束的那个操作数. 3.三元运算符 code1?code2:code3;   与if-else 不同: 返回code2或code3的值----code2,code3   都可以空的{}代替:       不能写break,continue. 4.NaN NaN !=NaN, 任何

学习JavaScript图片预加载模块_javascript技巧

前言 在一个应用中,通常会有很多图片,众所周知,加载图片需要时间,在图片没有加载出来之前,页面会是空白,为了提升用户体验,应用的开发人员使出浑身解数,其中最为常见的就是在图片没有加载完成之前,有一个加载动画.这里用到的技术主要是图片预加载.图片预加载的原理并不难,当给一个Image对象设置src属性后,图片就开始加载.给Image对象指定事件要位于设置src属性之前. 涉及到的内容 1.需要预加载的图片并不仅仅只是一张,通常将所有图片的信息保存在一个数组或者对象中,为了加载所有的图片,需要遍历出

跟我学习javascript的异步脚本加载_javascript技巧

先来看这行代码: <script src = "allMyClientSideCode.js"></script> 这有点儿--不怎么样."这该放在哪儿?"开发人员会奇怪,"靠上点,放到<head>标签里?还是靠下点,放到<body>标签里?"这两种做法都会让富脚本站点的下场很凄惨.<head>标签里的大脚本会滞压所有页面渲染工作,使得用户在脚本加载完毕之前一直处于"白屏死机&

跟我学习javascript解决异步编程异常方案_javascript技巧

一.JavaScript异步编程的两个核心难点 异步I/O.事件驱动使得单线程的JavaScript得以在不阻塞UI的情况下执行网络.文件访问功能,且使之在后端实现了较高的性能.然而异步风格也引来了一些麻烦,其中比较核心的问题是: 1.函数嵌套过深 JavaScript的异步调用基于回调函数,当多个异步事务多级依赖时,回调函数会形成多级的嵌套,代码变成 金字塔型结构.这不仅使得代码变难看难懂,更使得调试.重构的过程充满风险. 2.异常处理 回调嵌套不仅仅是使代码变得杂乱,也使得错误处理更复杂.这