JavaScript 中建立对象的那些事儿
本文原载自 js-professional.lxfriday.xyz/blog/2019/1…，做为学习笔记总结呈现。前端
建立对象的几种基本方式
{}对象字面量Object()或者new Object()new Constructor()Object.create()Object.assign()
关于 new Constructor() Object.create() 和 Object.assign() 建立对象的过程和模拟实现能够参考这篇文章 前端面试必备 | 5000字长文解释千万不能错过的原型操做方法及其模拟实现（原型篇：下）。面试
工厂模式
function createPerson(name, age, job) {
const o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function() {
console.log(this.name);
};
return o;
}
const person1 = createPerson("Nicholas", 29, "Software Engineer");
const person2 = createPerson("Greg", 27, "Doctor");
复制代码
每一次调用上面的 createPerson 工厂函数均可以建立一个对象，这个对象有 name age job 三个属性和一个 sayName 方法，依据传入的参数的不一样，返回对象的值也会不一样。数组
缺点：没有解决这个对象是一个什么类型的对象（没有更精确的对象标识，即没有精确的构造函数）。浏览器
构造函数模式
将工厂改形成构造函数以后，以下闭包
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = function() {
console.log(this.name);
};
}
const person1 = new Person("Nicholas", 29, "Software Engineer");
const person2 = new Person("Greg", 27, "Doctor");
person1.sayName(); // Nicholas
person2.sayName(); // Greg
复制代码
构造函数和工厂的区别：函数
- 没有显式建立对象；
- 直接把属性和方法赋值给
this - 没有
return
使用构造函数建立对象将会有如下几个步骤：布局
- 在内存中建立一个新对象
- 新对象内部的
[[Prototype]]指针指向构造函数的prototype属性指向的对象； - 将构造函数的上下文
this指向新建立的对象； - 执行构造函数内部的代码（给新对象添加属性）；
- 若是构造函数
return非null的对象，那返回的就是这个对象，不然返回新建立的这个对象。没有return时，隐式返回新建立的对象，return null会返回新建立的对象；
缺点：每次实例化一个新对象，都会在内部建立一个 sayName 对应的匿名函数，而这个函数对全部实例来说是没有必要每次都建立的，他们只须要指向同一个函数便可。学习
因此上面的代码通过改造以后，变成下面这样：ui
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = sayName;
}
function sayName() {
console.log(this.name);
}
const person1 = new Person("Nicholas", 29, "Software Engineer");
const person2 = new Person("Greg", 27, "Doctor");
person1.sayName(); // Nicholas
person2.sayName(); // Greg
复制代码
上述的作法虽然解决了重复建立匿名函数的问题，可是又引入了新的问题。this
外面的 sayName 函数仅仅在构造函数中用到，若是对象须要不少个这样的函数，那么就须要在外部定义不少个这种函数，这无疑会致使代码很难组织。
原型模式
函数建立以后都会有一个 prototype 属性，每一个使用该构造函数建立的对象都有一个 [[prototype]] 内部属性指向它。
使用原型的好处在于它全部的属性和方法会在实例间共享，而且这个共享的属性和方法是直接在原型上设置的。
function Person() {}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function() {
console.log(this.name);
};
const person1 = new Person();
person1.sayName(); // "Nicholas"
const person2 = new Person();
person2.sayName(); // "Nicholas"
console.log(person1.sayName == person2.sayName); // true
复制代码
关于原型的工做原理，能够查看下面三篇文章，看完以后相信你对原型的认识比大多数人都要深入！
- 前端面试必备 | 5000 字长文解释千万不能错过的原型操做方法及其模拟实现（原型篇：下）
- 前端面试必备 | 古怪的原型（鸡生蛋仍是蛋生鸡）（原型篇：中）
- 前端面试必备 | 使用原型和构造函数建立对象（原型篇：上）
理解原型的层级
对象中属性的查找机制：
当从对象中访问一个属性的时候，JS 引擎将会按属性名进行查找。JS 引擎会先查找对象自身。若是找到了这个属性，就会中止查找并返回属性对应的值，若是在对象自身没有找到，则会经过原型链到原型对象中继续查找这个属性，若是找到了这个属性，就会中止查找并返回属性对应的值，不然会继续到上层原型链中查找，直到碰到 null 。
当一个属性添加到实例中时，这个属性会覆盖原型上的同名属性，这个覆盖指的是查找的时候不会到原型中查找同名属性。即便属性的值被赋值为 null 或 undefined，它依然会阻止到原型链上访问。因此若是想要访问，就须要删除这个属性，使用 delete obj.xx 。
可使用 hasOwnProperty 判断实例是否拥有某个属性，返回 true 则表示实例自己拥有该属性，不然表示它没有这个属性。当一个属性存在于原型链上时，能够访问到这个属性，可是使用 hasOwnProperty 将返回 false。
in 操做符
in 操做符用在两个地方，一个是用在 for ... in 循环中，另外一个是单独使用。单独使用时，返回 true 表示属性能够在对象或者其原型链上找到。
function Person() {}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function() {
console.log(this.name);
};
const person1 = new Person();
const person2 = new Person();
console.log(person1.hasOwnProperty("name")); // false
console.log("name" in person1); // true
person1.name = "Greg";
console.log(person1.name); // "Greg" - from instance
console.log(person1.hasOwnProperty("name")); // true
console.log("name" in person1); // true
console.log(person2.name); // "Nicholas" - from prototype
console.log(person2.hasOwnProperty("name")); // false
console.log("name" in person2); // true
delete person1.name;
console.log(person1.name); // "Nicholas" - from the prototype
console.log(person1.hasOwnProperty("name")); // false
console.log("name" in person1); // true
复制代码
能够经过组合使用 hasOwnProperty 和 in 来实现判断一个属性是否存在于原型链上：
function hasPrototypeProperty(object, name) {
return !object.hasOwnProperty(name) && name in object;
}
const obj = Object.create({ name: "lxfriday" });
console.log(obj);
console.log(hasPrototypeProperty(obj, "name"));
复制代码
关于对象属性的枚举顺序
for ... in Object.keys() Object.getOwnPropertyNames/Symbols() 和 Object.assign() 在处理属性枚举顺序的时候会有很大差异。
for ... in Object.keys() 没有肯定的枚举顺序，它们的顺序取决于浏览器实现。
而 Object.getOwnPropertyNames() Object.getOwnPropertySymbols() 和 Object.assign() 是有肯定的枚举顺序的。
- 数字键会按照升序先枚举出来；
- 字符串和 symbol 键按照插入的顺序枚举出来；
- 对象字面量中定义的键会按照代码中的逗号分割顺序枚举出来；
const k2 = Symbol("k2");
const k1 = Symbol("k1");
const o = { 1: 1, [k2]: "sym2", second: "second", 0: 0, first: "first" };
o[k1] = "sym1";
o[3] = 3;
o.third = "third";
o[2] = 2;
// [ '0', '1', '2', '3', 'second', 'first', 'third' ]
console.log(Object.getOwnPropertyNames(o));
// [ Symbol(k2), Symbol(k1) ]
console.log(Object.getOwnPropertySymbols(o));
复制代码
对象的迭代
ES 2017 引入了两个静态方法来将对象的内容转换为可迭代的格式。
Object.values() 返回对象值构成的数组； Object.entries() 返回一个二维数组，数组中的每一个小数组由对象的属性和值构成，相似于 [[key, value], ...]。
const o = { foo: "bar", baz: 1, qux: {} };
console.log(Object.values(o)); // ["bar", 1, {}]
console.log(Object.entries(o)); // [["foo", "bar"], ["baz", 1], ["qux", {}]]
复制代码
在输出的数组中，非字符串的属性会转换成字符串，上述的两个方法对引用类型是采起的浅拷贝。
const o = { qux: {} };
console.log(Object.values(o)[0] === o.qux); // true
console.log(Object.entries(o)[0][1] === o.qux); // true
复制代码
symbol 键名会被忽略掉。
const sym = Symbol();
const o = { [sym]: "foo" };
console.log(Object.values(o)); // []
console.log(Object.entries(o)); // []
复制代码
原型的另外一种写法
上面的例子中，给原型赋值都是一个个赋，比较繁琐，看看下面的赋值方式：
function Person() {}
Person.prototype = {
name: "Nicholas",
age: 29,
job: "Software Engineer",
sayName() {
console.log(this.name);
}
};
复制代码
上面的例子中，Person 的原型直接指向一个对象字面量，这种方式最终的结果和前面的单个赋值是同样的，除了原型的 constructor 属性，constructor 再也不指向 Person 构造函数。默认状况下，当一个函数建立的时候，会建立一个 prototype 对象，而且这个对象上的 constructor 属性也会自动指向这个函数。因此这种作法覆盖了默认的 prototype 对象，意味着 constructor 属性指向新对象的对应属性。虽然 instanceof 操做符依然会正常工做，可是已经没法用 constructor 来判断实例的类型。看下面的例子：
const friend = new Person();
console.log(friend instanceof Object); // true
console.log(friend instanceof Person); // true
console.log(friend.constructor == Person); // false
console.log(friend.constructor == Object); // true
复制代码
若是 constructor 属性很重要，那么你能够手动的给它修复这个问题：
function Person() {}
Person.prototype = {
constructor: Person,
name: "Nicholas",
age: 29,
job: "Software Engineer",
sayName() {
console.log(this.name);
}
};
复制代码
不过上面的设置方法有一个问题，constructor 的属性描述以下
{
value: [Function: Person],
writable: true,
enumerable: true,
configurable: true
}
复制代码
咱们再看看 Object.prototype.constructor：
{
value: [Function: Object],
writable: true,
enumerable: false,
configurable: true
}
复制代码
咱们本身赋值时枚举属性会被默认设置为 true，因此须要经过 Object.defineProperty 来设置不可枚举：
Object.defineProperty(Person.prototype, "constructor", {
value: Person,
enumerable: false,
configurable: true,
writable: true
});
复制代码
原型存在的问题
咱们知道原型属性对全部实例是共享的，当原型属性是原始值时没有问题，当原型属性是引用类型时将会出现问题。看看下面的例子：
function Person() {}
Person.prototype = {
constructor: Person,
name: "Nicholas",
age: 29,
job: "Software Engineer",
friends: ["Shelby", "Court"],
sayName() {
console.log(this.name);
}
};
const person1 = new Person();
const person2 = new Person();
person1.friends.push("Van");
console.log(person1.friends); // "Shelby,Court,Van"
console.log(person2.friends); // "Shelby,Court,Van"
console.log(person1.friends === person2.friends); // true
复制代码
上述例子中，原型属性 friends 本来是一个包含两个字符串的数组，可是因为 person1 修改了它的内容，致使了原型上的这个属性被更改了，因此 person2 访问的时候也会打印三个字符串。
因为这个问题，原型模式并不会单独使用，咱们常常会结合构造函数和原型来建立对象。
总结
咱们知道，使用构造函数或者原型建立对象都会存在问题，接下来咱们组合使用这二者来解决上面的问题。
- 构造函数的问题：每一个对象都会声明对应的函数，浪费内存；
- 原型的问题：更改引用类型的原型属性的值会影响到其余实例访问该属性；
为了解决上面的问题，咱们能够把全部对象相关的属性定义在构造函数内，把全部共享属性和方法定义在原型上。
// 把对象相关的属性定义在构造函数中
function Human(name, age){
this.name = name,
this.age = age,
this.friends = ["Jadeja", "Vijay"]
}
// 把共享属性和方法定义在原型上
Human.prototype.sayName = function(){
console.log(this.name);
}
// 使用 Human 构造函数建立两个对象
var person1 = new Human("Virat", 31);
var person2 = new Human("Sachin", 40);
// 检查 person1 和 person2 的 sayName 是否指向了相同的函数
console.log(person1.sayName === person2.sayName) // true
// 更改 person1 的 friends 属性
person1.friends.push("Amit");
// 输出: "Jadeja, Vijay, Amit"
console.log(person1.friends)
// 输出: "Jadeja, Vijay"
console.log(person2.friends)
复制代码
咱们想要每一个实例对象都拥有 name age 和 friends 属性，因此咱们使用 this 把这些属性定义在构造函数内。另外，因为 sayName 是定义在原型对象上的，因此这个函数会在全部实例间共享。
在上面的例子中，person1 对象更改 friends 属性时， person2 对象的 friends 属性没有更改。这是由于 person1 对象更改的是本身的 friends 属性，不会影响到 person2 内的。
最后
往期精彩：
- 前端面试必备 | 5000字长文解释千万不能错过的原型操做方法及其模拟实现（原型篇：下）
- 前端面试必备 | 古怪的原型（鸡生蛋仍是蛋生鸡）（原型篇：中）
- 前端面试必备 | 使用原型和构造函数建立对象（原型篇：上）
- 前端面试必会 | 一文读懂 JavaScript 中的 this 关键字
- 前端面试必会 | 一文读懂现代 JavaScript 中的变量提高 - let、const 和 var
- 前端面试必会 | 一文读懂 JavaScript 中的闭包
- 前端面试必会 | 一文读懂 JavaScript 中的做用域和做用域链
- 前端面试必会 | 一文读懂 JavaScript 中的执行上下文
- IntersectionObserver 和懒加载
- 初探浏览器渲染原理
- CSS 盒模型、布局和包含块
- 详细解读 CSS 选择器优先级
关注公众号能够看更多哦。
感谢阅读，欢迎关注个人公众号 云影 sky，带你解读前端技术，掌握最本质的技能。关注公众号能够拉你进讨论群，有任何问题都会回复。
- 1. JavaScript 中建立对象的那些事儿
- 2. JS对象那些事儿
- 3. JavaScript 对象那些事
- 4. 面向对象 - Java那些事儿
- 5. JavaScript入门那些事儿
- 6. Javascript 对象那些事（持续更新）
- 7. JavaScript面向对象那些事
- 8. javascript建立对象的一些方式
- 9. setTimeout那些事儿
- 10. javascript定时器的那些事儿
- 更多相关文章...
- • JavaScript 指南 - 网站建设指南
- • ASP ASPError 对象的属性 - ASP 教程
- • 适用于PHP初学者的学习线路和建议
- • C# 中 foreach 遍历的用法
-
每一个你不满意的现在，都有一个你没有努力的曾经。