理解原型对象与其实例之间是一对多的关系,对于实现正确的对象行为很重要。
常见的错误是不小心将每个实例的数据存储到了其原型中。

示例

一个实现了树型数据结构的类可能将子节点存储在数组中。

实例状态在原型中(错误)

将存储子节点的数组放置在原型对象中将会导致实现被完全破坏。

function Tree(x){
this.value=x;
}
Tree.prototype={
children:[],
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 main=new Tree(4);
main.addChild(left);
main.addChild(right); main.children;//[1,3,5,7,left,right]

我们预想的main.children应该是只包括left,right两个Tree的实例的,为什么包括这些了呢?
看一下下面这张图就明白了

这里面原有的实例都要可以访问和操作原型中children,然后都是对这个数组进行了添加,导致对应实例的children数据出现错误。

实例状态在实例对象中(正确)

实现Tree类的正确方式是为每个实例创建一个单独的children数组。

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

同样的我们看一张上面代码的图示

分析

共享有状态的数据可能会导致错误。通常在一个类的多个实例之间共享方法是安全的,因为方法通常是无状态的,这不同于通过this来引用实例状态。(因为方法调用的语法确保了this被绑定到实例对象,即使该方法是从原型中继承来的,共享方法仍然可以访问实例状态)一般情况下,任何不可变的数据可以被存储在原型中从而被安全地共享。有状态的数据原则上也可以存储在原型中,只要你真正想共享它。在原型中最常见的数据是方法,而每个实例的状态都存储在实例对象中。

提示

  • 共享可变数据可能会出现问题,因为原型是被其所有的实例共享的

  • 将可变的实例状态存储在实例对象中

[Effective JavaScript 笔记]第36条:只将实例状态存储在实例对象中的更多相关文章

  1. [Effective JavaScript 笔记] 第4条:原始类型优于封闭对象

    js有5种原始值类型:布尔值.数字.字符串.null和undefined. 用typeof检测一下: typeof true; //"boolean" typeof 2; //&q ...

  2. [Effective JavaScript 笔记] 第5条:避免对混合类型使用==运算符

    “1.0e0”=={valueOf:function(){return true;}} 是值是多少? 这两个完全不同的值使用==运算符是相等的.为什么呢?请看<[Effective JavaSc ...

  3. [Effective JavaScript 笔记]第27条:使用闭包而不是字符串来封装代码

    函数是一种将代码作为数据结构存储的便利方式,代码之后可以被执行.这使得富有表现力的高阶函数抽象如map和forEach成为可能.它也是js异步I/O方法的核心.与此同时,也可以将代码表示为字符串的形式 ...

  4. [Effective JavaScript 笔记]第28条:不要信赖函数对象的toString方法

    js函数有一个非凡的特性,即将其源代码重现为字符串的能力. (function(x){ return x+1 }).toString();//"function (x){ return x+ ...

  5. [Effective JavaScript 笔记]第65条:不要在计算时阻塞事件队列

    第61条解释了异步API怎样帮助我们防止一段程序阻塞应用程序的事件队列.使用下面代码,可以很容易使一个应用程序陷入泥潭. while(true){} 而且它并不需要一个无限循环来写一个缓慢的程序.代码 ...

  6. [Effective JavaScript 笔记]第46条:使用数组而不要使用字典来存储有序集合

    对象属性无序性 js对象是一个无序属性集合. var obj={}; obj.a=10; obj.b=30; 属性a和属性b并没有谁前谁后之说.for...in循环,先输出哪个属性都有可能.获取和设置 ...

  7. [Effective JavaScript 笔记]第55条:接收关键字参数的选项对象

    53节建议保持参数顺序的一致约定对于帮助程序员记住每个参数在函数调用中的意义很重要.参数较少这个主意不错,但如果参数过多后,就出现麻烦了,记忆和理解起来都不太容易. 参数蔓延 如下面这些代码: var ...

  8. [Effective JavaScript 笔记]第20条:使用call方法自定义接收者来调用方法

    不好的实践 函数或方法的接收者(即绑定到特殊关键字this的值)是由调用者的语法决定的.方法调用语法将方法被查找的对象绑定到this变量,(可参阅之前文章<理解函数调用.方法调用及构造函数调用之 ...

  9. [Effective JavaScript 笔记]第23条:永远不要修改arguments对象

    arguments对象并不是标准的Array类型的实例.arguments对象不能直接调用Array方法. arguments对象的救星call方法 使得arguments可以品尝到数组方法的美味,知 ...

随机推荐

  1. EF实体框架之CodeFirst二

    在codefirst一中也说了Mapping是实体与数据库的纽带,model通过Mapping映射到数据库,我们可以从数据库的角度来分析?首先是映射到数据库,这个是必须的.数据库里面一般包括表.列.约 ...

  2. 深入JVM系列之(3):JavaCore和HeapDump

    jvm 生成javacore和heapdump文件 在Server端开发与运维中,经常需要生成javacore和heapdump文件,以便分析jvm的运行状态.javacore文件中给出jvm线程的详 ...

  3. 公司ERP系统重构那些事

    记一次会议,我提出插件化的想法,有支持也有反对,其中"系统架构师"表示插件化后的项目没什么意义,今天来讨论项目是否需要插件化的一些观点. 项目背景 公司内部"ERP&qu ...

  4. Bootstrap3.0学习第十四轮(分页、徽章)

    详情请查看http://aehyok.com/Blog/Detail/21.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:ht ...

  5. AngularJS开发指南12:AngularJS的模板,CSS,数据绑定详解

    模板 AngularJS模板是一种声明式的规则.它包含了模型和控制器的信息,最后会被渲染成用户在浏览器中看到的视图.它是静态的DOM,包含HTML,CSS和AngularJS指定的元素和属性.Angu ...

  6. android 通过帧动画方式播放Gif动画

    注意:经过本人测试,这个方法很耗内存, 图片一多就崩了.慎用 <1>用工具(photoshop或者FireWorks)将GIF动画图片分解成多个GIF静态图片,然后保存在res\drawa ...

  7. MVC4 code first 增加属性,对应自动修改列的方法笔记

    VS工具>库程序包管理器>程序包管理控制台,然后输入以下命令 enable-migrations -contexttypename Mvc4Application1.Models.Movi ...

  8. nginx 的源码安装

    安装nginx之前要做的准备工作有:安装如下库 (1)gzip模块需要 zlib 库 (2)rewrite模块需要 pcre 库 (3)ssl 功能需要openssl库 还有一种简单的方法就是 yum ...

  9. PowerDesigner15下载、安装以及破解

    一.先安装PowerDesigner15(PowerDesigner15.1.0.2850),下载地址:点击下载 二.破解文件下载地址: 找到一个,居然这家伙的东西不是免费的:点击跳转 三.破解方法: ...

  10. Erlang第一课----基本变量

    1.(in Erlang shell)A sequence of expressions must be terminated with a period followed by whitespace ...