如何创建一个“纯净”的对象
如何创建一个“纯净”的对象
⭐️ 更多前端技术和知识点，搜索订阅号
JS 菌订阅
首先来看一段代码 ?
Object.prototype.log = ''
let obj = {
name: 'oli',
age: 12
}
for (const key in obj) {
console.log(key) // name age log
}假设 Object 的原型中有一个自定义的 log 属性，我们用字面量语法定义 obj 对象，那么使用 for-in 遍历方法就会遍历到这个 log 对象，为了只遍历其自身的属性，需要增加一层筛选
Object.prototype.log = ''
let obj = {
name: 'oli',
age: 12
}
for (const key in obj) {
if (obj.hasOwnProperty(key)) { // 检查是否是自身的属性
console.log(key) // name age
}
}虽然这样能够避免打印原型上的属性，但仍然比较麻烦 ?
接下来我们尝试用 Object.create 方法来创建对象
Object.prototype.log = ''
let obj = Object.create(null) // 传入 null 作为参数
obj.name = 'oli'
obj.age = 12
for (const key in obj) {
console.log(key)
}
这样就不会打印出原型上的属性了
我们再来看下 Object.create 和字面量语法创建一个空对象有什么区别
可以看到使用 create 方法并传入 null 作为参数可以避免原型被继承
字面量语法与
Object.create(Object.prototype)是一样的
那么 create 方法到底做了什么呢 ?
我们直接去看 MDN 有关这个方法的 polyfill
if (typeof Object.create !== "function") {
Object.create = function (proto, propertiesObject) {
if (typeof proto !== 'object' && typeof proto !== 'function') {
throw new TypeError('Object prototype may only be an Object: ' + proto);
} else if (proto === null) {
throw new Error("This browser's implementation of Object.create is a shim and doesn't support 'null' as the first argument.");
}
if (typeof propertiesObject != 'undefined') {
throw new Error("This browser's implementation of Object.create is a shim and doesn't support a second argument.");
}
+ function F() {}
+ F.prototype = proto;
+ return new F();
};
}重点看这里，create 方法的内部创建了一个函数，这个函数的原型指向 proto 并返回通过 new 操作符创建的函数的实例
因此用 create 方法创建的新的对象拥有原型上的属性也是正常了 ?
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create#Polyfill
很多时候就像第一段代码一样我们并不需要遍历原型上的属性和方法
使用 create 方法并传入 null 就能避免打印出原型上的方法
或者手动将 __proto__ 设置为 null
obj1 = {name: 'oli'}
obj1.__proto__ = null
?
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-04-20，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录