JavaScript入坑第二步：对象

繁华落尽丶千2017-06-142023-11-03

面向对象都有类的概念，通过类可以创建多个具有相同属性和方法的对象。ECMAScript中没有类的概念，因此它的对象与基于类的语言的对象有所不同。

##目录

一.理解JavaScript的对象
二.JavaScript中创建对象方法
1工厂模式
2 构造函数模式
3 原型模式
4 组合使用构造函数模式和原型模式

一.理解`JavaScript`的对象

JavaScript中的对象是一种无序的集合数据类型，它由若干键值对组成。其中值可以是函数或数据。

1.对象

自定义对象的最简单方法创建一个Object的实例。

var person = new Object();
person.name = "owen";
person.age = 25;
person.job = "iOS Engineer";
person.sayName = function() {
	console.log(this.name);
}

早期常用此方法创建对象，现在常用字面量：

var person = {
	name: "owen",
	age: 25,
	job: "iOS",

	sayName: function() {
		console.log(this.name);
	}
}

上述创建的对象相同。

2.属性类型

ECMAScript中有两种属性，数据属性和访问属性。

数据属性 ：数据包含4中描述其行为的特征。

特征	描述
configurable	表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，能否把属性改为访问属性。默认为true
enumerable	是否可以通过for-in循环返回属性。默认为true
writable	是否修改属性的值。默认为true
value	包含这个属性的数据值。默认为Undefined

前面定义的person前三个特征都是默认的true。如果想修改特征，可以通过Object.defineProperty()方法。

// person 是前面创建的对象
Object.defineProperty(person, "name", {
	writable: false,
	value: "owenli" 
});
person.sayName(); // owenli
person.name = "Tom";
person.sayName(); // owenli

configurable、enumerable、writable和value都可以通过此方法修改。

访问器属性:访问器属性也有4个特征

特征	描述
configurable	表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，能否把属性改为访问属性。默认为true
enumerable	是否可以通过for-in循环返回属性。默认为true
get	在读取属性时调用的函数，默认为Undefined
set	在写入属性时调用的函数，默认为Undefined

访问器属性不包含数据值，它包含一对getter和setter方法。getter和setter方法不是必需的。

访问属性的定义必须通过Object.defineProperty()方法。

var book = {
	_year: 2017,
	edition: 3
};
Object.defineProperty(book, "year", {
	get: function() {
		return this._year;
	},
	set: function(newValue) {
		if (newValue > 2017) {
			this._year = newValue;
			this.edition += newValue - 2017;
		}
	}

});
book.year = 2018;
console.log(book.edition); //4

_year : 下划线常用记号，表示只能通过对象方法访问的属性。

二.`JavaScript`中创建对象的方法

虽然上面调到的Object和字面量都可以创建对象，但是存在一个缺点：代码无法复用，存在大量的重复代码。为了解决这个问题，出现了工厂模式。

1 工厂模式

工厂模式抽象了创建具体对象的过程。由于ECMAScript无法创建类，所以使用函数封装创建对象的细节。

function createPerson(name, age, job) {
  var o = new Object();
  o.name = name;
  o.age = age;
  o.job = job;
  o.sayName = function() {
    console.log(this.name)
  };
  return o;
}
var person1 = createPerson("Owenli", 20, "Software Engineer");
var person2 = createPerson("Owen", 10, "Student");

缺点：工厂模式虽然解决了创建多个相似对象问题，但却没有解决识别对象的类型问题。

2 构造函数模式

ECMAScript中可以通过构造函数来创建特定类型的对象。使用构造函数模式重写前面的Person对象。

function Person(name, age, job) {
	this.name = age;
	this.age = age;
	this.job = job;
	this.sayName = function() {
		console.log(this.name);
	};
}

var person1 = new Person("Owen", 25, "iOS");
var person2 = new Person("Tom", 20, "Android");

要创建Person的实例，必须使用new操作符。如果不使用new就是普通函数。
与工厂模式区别：

没有显示创建对象

直接将属性和方法赋值给this

没有return语句

person1和person2分别保存不同的实例，它们的constructor（构造函数）属性，该属性指向Person。

1 2	console.log(person1.constructor == Person); // true console.log(person2.constructor == Person); //true

构造函数模式.jpg

可以使用instanceof检测对象类型。

1 2	console.log(person1 instanceof Person); //true console.log(person1 instanceof Object); //true

创建自定义的构造函数意味着将来可以将它的实例标识为一个特定的类型。

构造函数模式缺点：每个方法都要在每个实例上重新创建一遍。解决这个问题，出现了原型模式。

3 原型模式

前面创建的每个函数都有一个prototype属性，这个属性指向一个对象，该对象的用途是包含可以由特定类型所有实例共享的属性和方法。使用原型对象可以让所有对象实例共享所包含的属性和方法。

3.1 原型对象

举个🌰

function Person() {
}
Person.prototype.name = "Owenli";
Person.prototype.age = 25;
Person.prototype.job = "iOS";
Person.prototype.sayName = function() {
	console.log(this.name);
};
var person1 = new Person();

person1.sayName(); // Owenli
var person2 = new Person();
person2.sayName() // Owenli
console.log(person1.sayName == person2.sayName); // true

这与构造函数不同的是，这些属性和方法是由所有实例共享的。person1和person2访问的同一属性和同一方法。

👇 各对象之间关系

对象关系.jpg

上图展现了 Person构造函数，Person的原型属性以及Person的两个实例之间的关系。Person.prototype指向原型对象，而Person.prototype.constructor又指向了Person。原型中除了包含constructor属性之外，还包含其他属性。
两个实例都包含内部属性，该属性仅仅指向Person.prototype，也就是说两个实例跟构造函数没有直接关系。另外，两个实例并不包含属性和函数，通过查找对象属性可以调用sayName。

确定对象之间的关系

所有实现中无法访问到[[prototype]]，但是我们可以使用isPrototypeof()方法来确定对象之间是否存在关系。

1 2	console.log(Person.prototype.isPrototypeOf(person1)); //true console.log(Person.prototype.isPrototypeOf(person2)); //true

因为person1和person2内部都指向Person.prototype，所以都返回true。

搜索过程？

每当代码读取某个对象的某个属性时，都会执行搜索，目标是具体给定名字的属性。首先搜索实例本身，找到则返回属性值，如果找不到则继续搜索指针指向的原型对象，在原型对象中查找给定名字的属性。

上面通过实例访问原型对象，但是无法重写原型中的值。如果添加同名属性，实例中的属性会屏蔽原型中的那个属性。注意，只是屏蔽并没有修改。

接着上边的🌰

person1.name = "Tom";
console.log(person1.name); // Tom, ---来自实例
console.log(person2.name); // Owenli --- 来自原型

delete person1.name; // 删除实例中name
console.log(person1.name); // Owenli --- 来自原型

通过hasOwnProperty()方法可以检测一个属性是存在于实例中，还是原型中。

原型和in操作符

两种使用in操作符的方式：第一种，最熟悉for-in返回的是所有能够通过对象访问的、可枚举的属性。第二种，单独使用in在通过对象可以访问到属性时返回true，无论是存在原型中还是实例中。

简洁原型语法

function Person() {
	
}
Person.prototype = {
	name: "Owenli",
	age: 25,
	job: "iOS Developer",
	sayName: function() {
		console.log(this.name)
	}
};

注意：此写法可以当做对象字面量形式。需要注意，此时constructor不再指向Person，需要手动设置。

4 组合使用构造函数模式和原型模式

创建自定义类型的最常用方法，组合使用构造函数模式和原型模式。构造函数模式用于定义实例属性，而原型模式用于定义方法和共享属性。

function Person(name, age, job) {
	this.name = name;
	this.age = age;
	this.job = job;
	this.friends = ["Owen", "Tom"];
}
Person.prototype = {
	constructor: Person,
	sayName: function() {
		console.log(this.name);
	}
}


var person1 = new Person("Cat", 1, "Cater");
var person2 = new Person("Dog", 2, "Doger");

person1.friends.push("Vanh");

console.log(person1.friends); // ["Owen", "Tom", "Vanh"]
console.log(person2.friends); // ["Owen", "Tom"]

person1.sayName(); // Cat
person2.sayName(); // Dog

console.log(person1.sayName === person2.sayName); // true