首页 > 代码库 > 编写高质量JS代码的68个有效方法(九)
编写高质量JS代码的68个有效方法(九)
No.41、将原型视为实现细节
Tips:
- 对象是接口,原型是实现
- 避免检查你无法控制的对象的原型结构
- 避免检查实现在你无法控制的对象内部的属性
我们可以获取对象的属性值和调用其方法,这些操作都不是特别在意属性存储在原型继承结构的哪个位置。只要其属性值保存很定,那么这些操作的行为也不变。简言之,原型是一种对象行为的实现细节。
正是由于以上的特性,所以如果修改了实现细节,那么依赖于这些对象的使用者就会被破坏,而且还很难诊断这类bug。所以一般来说,对于使用者,最好不要干涉那些属性。
No.42、避免使用轻率的猴子补丁
Tips:
- 避免使用轻率的猴子补丁
- 记录程序库所执行的所有猴子补丁
- 考虑通过将修改设置于一个导出函数中,使猴子补丁成为可选的
- 使用猴子补丁为缺失的标准API提供polyfills
何为猴子补丁?
由于对象共享原型,因为每一个对象都可以增加、删除或修改原型的属性。这个有争议的实践通常被称为猴子补丁。
猴子补丁的吸引力在于它的强大,如果数组缺少一个有用的方法,那么我们可以自己扩展它。但是在多个库同时对数组进行不兼容扩展时,问题就来了,有可能调用方法之后的结果和预期不一致。
危险的猴子补丁有一个特别可靠而且有价值的使用场景:polyfill。补齐标准所支持的方法。
No.43、使用Object的直接实例构造轻量级的字典
Tips:
- 使用对象字面量构建轻量级字典
- 轻量级字典应该是Object.prototype的直接子类,以使for...in循环免受原型污染
JavaScript对象的核心是一个字符串属性名称与属性值的映射表。
var dict = { key1: ‘value1‘, key2: ‘value2‘};for(var key in dict){ console.log(‘key=‘+ key + ‘,value=http://www.mamicode.com/‘ + 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:
- 在ES5中,使用Object.create(null)创建的自由原型的空对象是不太容易被污染的
- 在一些较老的环境中,考虑使用{proto: null}
- 要注意
__proto__
既不标准,也不是完全可移植的,并且可能会在未来的JavaScript环境中去除 - 绝不要使用
__proto__
名作为字典的key,因为一些环境将其作为特殊的属性对待
对构造函数的原型属性设置null或者是undefined是无效的:
function Dict(){}Dict.prototype = null;var dict = new Dict();console.log(Object.getPrototypeOf(dict) === null); // falseconsole.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:
- 使用hasOwnProperty方法避免原型污染
- 使用词法作用域和call方法避免覆盖hasOwnProperty方法
- 考虑在封装hasOwnProperty测试样板代码的类中实现字典操作
- 使用字典类避免将
__proto__
作为key来使用
即使是一个空的对象字面量也继承了Object.prototype的大量属性:
var dict = {}console.log(‘a‘ in dict); // falseconsole.log(‘toString‘ in dict); // trueconsole.log(‘valueOf‘ in dict); // true
不过,Object.prototype提供了方法来测试字典条目:
var dict = {}console.log(dict.hasOwnProperty(‘a‘)); // falseconsole.log(dict.hasOwnProperty(‘toString‘)); // falseconsole.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
<style></style>
编写高质量JS代码的68个有效方法(九)