[20141227]编写高质量JS代码的68个有效方法（八）

NO.36、只将实例状态存储在实例对象中

Tips：

1. 共享可变数据可能会出问题，因为原型是被其所有的实例共享的
2. 将可变的实例存储在实例对象中

一般来说，由于原型属性指向的对象是所有实例共享的。所以不建议在原型指向的对象中存储共享数据。下面给一个简单的例子：

var Person = function(name){    this.name = name;};Person.prototype = {    children: [],    addChild: function(childName){        this.children.push(childName);    },    getChildren: function(){        return this.children;    }};var p1 = new Person(‘P1‘);var p2 = new Person(‘P2‘);p2.addChild(‘P2_C1‘);console.log(p1.getChildren());

结果比较明显。p2的孩子成p1的了。标准做法是将children存储在实例对象中。

var Person = function(name){    this.name = name;    this.children = [];};Person.prototype = {    addChild: function(childName){        this.children.push(childName);    },    getChildren: function(){        return this.children;    }};

No.37、认识到this变量的隐式绑定问题

Tips：

1. this变量的作用域总是有其最近的封闭函数所确定
2. 使用一个局部变量（通常命名为self,me,that）使得this的绑定对于内部函数是可用的。

老规矩，看一个简单的示例：

var testObj = {    a1: 0,    fun1: function(){        function fun2(){            console.log(this.a1);        }        fun2();    }};testObj.fun1();

为什么会这样呢？因为this变量是以不同的方式被绑定的。每个函数都有一个this变量的隐式绑定。this变量是隐式的绑定到最近的封闭函数。针对以上的问题，可以有集中方法来处理，参考如下：

//通过将this用变量self保存的方式实现var testObj = {    a1: 0,    fun1: function(){        var self = this;        function fun2(){            console.log(self.a1);        }        fun2();    }};testObj.fun1();//通过call方法指定接收者（也可以用apply）var testObj = {    a1: 0,    fun1: function(){        function fun2(){            console.log(this.a1);        }        fun2.call(this);    }};testObj.fun1();//通过bind来实现var testObj = {    a1: 1,    fun1: function(){        function fun2(){            console.log(this.a1);        }        fun2.bind(this)();    }};testObj.fun1();

No.38、在子类的构造函数中调用父类的构造函数

Tips：

1. 在子类构造函数中显式地传入this作为显式的接收者调用父类的构造函数
2. 使用Object.create函数来构造子类的原型对象以避免调用父类的构造

JS中实现的继承：

var Animal = function(){    this.weight = 50;};Animal.prototype.eat = function(){    console.log(‘eat food...‘);};var Dog = function(){    Animal.call(this);    Dog.prototype = Object.create(Animal.prototype);};var dog = new Dog();console.log(dog.weight);

No.39、不要重用父类的属性名

Tips：

1. 留意父类使用的所有属性名
2. 不要再子类中重用父类的属性名

由于JS中，属性都是key-value存储，那么同名的属性指向同样的地址，所以以下代码：

var Animal = function(){    this.weight = 50;    this.id = ++Animal.nextId;};Animal.nextId = 0;Animal.prototype.eat = function(){    console.log(‘eat food...‘);};var Dog = function(){    Animal.call(this);    this.id = ++ Dog.nextId;    Dog.prototype = Object.create(Animal.prototype);};Dog.nextId = 0;var dog = new Dog();console.log(dog.id);

两个类都试图给实例属性id写数据。

No.40、避免继承标准类

Tips：

1. 继承标准类往往会由于一些特殊的内部属性（如[[Class]]）而被破坏
2. 使用属性委托优于继承标准类

扩展标注库使得其功能更强大是很有诱惑力的，但不幸的是它们的定义具有很多特殊的行为，所以很难写出正确的子类。

var ArrayEx = function(){    for(var i = 0, len = arguments.length; i<len ; i++){        this[i] = arguments[i];    }};ArrayEx.prototype = Object.create(Array.prototype);var ar = new ArrayEx(‘1‘, ‘2‘);console.log(ar.length) //猜猜结果是什么？

原因分析：length属性只对在内部标记为“真正的”数组对象才起作用。直接继承的对象并没有继承 Array的标记标签属性[[Class]]。测试如下：

var ar = new ArrayEx(‘1‘, ‘2‘);console.log(Object.prototype.toString.call(ar)); //[object Object]console.log(Object.prototype.toString.call([])); //[object Array]

ECMAScript标准库中干掉大多数构造函数都有类似的问题。基于这个原因，最好避免继承一下的标准类： Array,Boolean,Date,Function,Number,RegExp或String。

要想实现类似的功能，可以采用属性委托的方式：

var ArrayEx = function(){    this.array = []    for(var i = 0, len = arguments.length; i<len ; i++){        this.array[i] = arguments[i];    }};ArrayEx.prototype.forEach = function(f, thisArg){    if(typeof thisArg === ‘undefined‘){        thisArg = this;    }    this.array.forEach(f, thisArg);};var ar = new ArrayEx(‘1sfdfsd‘, ‘2fdsfs‘);ar.forEach(function(item, i){    console.log(item);});

编写高质量JS代码的68个有效方法（八）