Skip to content

Latest commit

 

History

History
175 lines (130 loc) · 5.84 KB

[20150110]编写高质量JS代码的68个有效方法（九）.md

File metadata and controls

175 lines (130 loc) · 5.84 KB
Raw
title date
编写高质量JS代码的68个有效方法（九）
2015/01/10

##No.41、将原型视为实现细节 Tips：

  1. 对象是接口，原型是实现
  2. 避免检查你无法控制的对象的原型结构
  3. 避免检查实现在你无法控制的对象内部的属性

我们可以获取对象的属性值和调用其方法，这些操作都不是特别在意属性存储在原型继承结构的哪个位置。只要其属性值保存很定，那么这些操作的行为也不变。简言之，原型是一种对象行为的实现细节。

正是由于以上的特性，所以如果修改了实现细节，那么依赖于这些对象的使用者就会被破坏，而且还很难诊断这类bug。所以一般来说，对于使用者，最好不要干涉那些属性。

##No.42、避免使用轻率的猴子补丁 Tips：

  1. 避免使用轻率的猴子补丁
  2. 记录程序库所执行的所有猴子补丁
  3. 考虑通过将修改设置于一个导出函数中，使猴子补丁成为可选的
  4. 使用猴子补丁为缺失的标准API提供polyfills

何为猴子补丁？

由于对象共享原型，因为每一个对象都可以增加、删除或修改原型的属性。这个有争议的实践通常被称为猴子补丁。

猴子补丁的吸引力在于它的强大，如果数组缺少一个有用的方法，那么我们可以自己扩展它。但是在多个库同时对数组进行不兼容扩展时，问题就来了，有可能调用方法之后的结果和预期不一致。

危险的猴子补丁有一个特别可靠而且有价值的使用场景：polyfill。补齐标准所支持的方法。

##No.43、使用Object的直接实例构造轻量级的字典 Tips:

  1. 使用对象字面量构建轻量级字典
  2. 轻量级字典应该是Object.prototype的直接子类，以使for...in循环免受原型污染

JavaScript对象的核心是一个字符串属性名称与属性值的映射表。

var dict = {
  key1: 'value1',
  key2: 'value2'
};
for(var key in dict){
  console.log('key='+ key + ',value=' + dict[key]);
}

在使用for...in时，要小心原型污染。

function Dict(){
  Dict.prototype.count = function(){
    var c = 0;
    for(var p in this){
      c++;
    }
    return c;
  }  
}

var dict = new Dict();
dict.name = 'jay';
console.log(dict.count()); //结果是2，因为for...in会枚举出所有的属性，包括原型上的。

所有人都不应当增加属性到Object.prototype上，因为这样做可能会污染for...in循环，那么我们通过使用Object的直接实例，可以将风险仅仅局限于Object.prototype。

##No.44、使用null原型以防止原型污染 Tips：

  1. 在ES5中，使用Object.create(null)创建的自由原型的空对象是不太容易被污染的
  2. 在一些较老的环境中，考虑使用{proto: null}
  3. 要注意__proto__既不标准，也不是完全可移植的，并且可能会在未来的JavaScript环境中去除
  4. 绝不要使用__proto__名作为字典的key，因为一些环境将其作为特殊的属性对待

对构造函数的原型属性设置null或者是undefined是无效的：

function Dict(){
  
}
Dict.prototype = null;
var dict = new Dict();
console.log(Object.getPrototypeOf(dict) === null); // false
console.log(Object.getPrototypeOf(dict) === Object.prototype); //true

在ES5中，提供了标准方法来创建一个没有原型的对象：

var dict = Object.create(null);
console.log(Object.getPrototypeOf(dict) === null); // true

在不支持Object.create函数的旧的JS环境中，可以使用如下方式创建没有原型的对象：

var dict = {__proto__: null}
console.log(Object.getPrototypeOf(dict) === null); // true

注意：在支持Object.create函数的环境中，尽可能的坚持使用标准的Object.create函数

##No.45、使用hasOwnProperty方法来避免原型污染 Tips：

  1. 使用hasOwnProperty方法避免原型污染
  2. 使用词法作用域和call方法避免覆盖hasOwnProperty方法
  3. 考虑在封装hasOwnProperty测试样板代码的类中实现字典操作
  4. 使用字典类避免将__proto__作为key来使用

即使是一个空的对象字面量也继承了Object.prototype的大量属性：

var dict = {}
console.log('a' in dict); // false
console.log('toString' in dict); // true
console.log('valueOf' in dict); // true

不过，Object.prototype提供了方法来测试字典条目：

var dict = {}
console.log(dict.hasOwnProperty('a')); // false
console.log(dict.hasOwnProperty('toString')); // false
console.log(dict.hasOwnProperty('valueOf')); // false

但是，如果在字典中存储一个同为“hasOwnProperty”的属性，那么：

var dict = {
  hasOwnProperty: null
}
console.log(dict.hasOwnProperty('a')); // TypeError

最安全的方法则是使用call：

var dict = {
  hasOwnProperty: null
}
console.log({}.hasOwnProperty.call(dict, 'hasOwnProperty')); // true、

最后，我们来看一个复杂的但更安全的字典类：

function Dict(elements){
  this.elements = elements || {};
  this.hasSpecialProto = false;
  this.specialProto = undefined;
}

Dict.prototype.has = function(key){
  if(key === '__proto__'){
    return this.hasSpecialProto;
  }
  return {}.hasOwnProperty.call(this.elements, key);
};

Dict.prototype.get = function(key){
  if(key === '__proto__'){
    return this.specialProto;
  }
  return this.has(key) ? this.elements[key] : undefined;
};

Dict.prototype.set = function(key, value){
  if(key === '__proto__'){
    this.hasSpecialProto = true;
    this.specialProto = value;
  }else{
    this.elements[key] = value;
  }
};

Dict.prototype.remove = function(key){
  if(key === '__proto__'){
    this.hasSpecialProto = false;
    this.specialProto = undefined;
  }else{
    delete this.elements[key];
  }
};

// 测试代码
var dict = new Dict();
console.log(dict.has('__proto__')); // false