JS 对象高级

JS 对象高级

一、对象创建模式

1. 方式一：Object构造函数模式

• 方式：先创建空Object对象，再动态添加属性 / 方法；
• 适用场景：起始时不确定对象内部数据
• 问题：语句太多

var p = new Object();
p.name = "Tom";
p.age = 12;
p.setName = function(name) {
	this.name = name;
};

2. 方式二：对象字面量模式

• 方式：使用{ }创建对象，同时指定属性 / 方法
• 适用场景：起始时对象内部数据是确定的；
• 问题：如果创建多个对象，有重复代码

var p = {
	name: "Tom",
	age: 12,
	setName: function(name) {
		this.name = name
	}
};

3. 方式三：工厂模式

• 方式：通过工厂函数动态创建对象并返回；
• 适用场景：需要创建多个对象；
• 问题：对象没有一个具体的类型，都是Object类型；

//返回一个对象的函数--->工厂函数
function createPerson(name, age) {
	var obj = {
		name: name,
		age: age,
		setName: function(name) {
			this.name = name;
		}
	};
	return obj;
};
function createStudent(name, price) {
	var obj = {
		name: name,
		price: price,
		setName: function(name) {
			this.name = name;
		}
	};
	return obj;
};
var person = createPerson("Bob",12);
var student= createStudent("Mary",12000);
//person student都是object类型

4. 方式四：自定义构造函数模式

• 方式：自定义构造函数，通过new创建对象
• 适用场景：需要创建多个类型确定的对象；
• 问题：每个对象都有相同的数据，浪费内存；

function Person(name, age) {
	this.name = name;
	this.age = age;
	this.setName = function(name) {
		this.name = name;
	};
}
function Student(name, price) {
	this.name = name;
	this.price = price;
}
var person = new Person("Bob", 12);
console.log(person instanceof Person);// true
var student = new Student("Mary", 12000);
console.log(student instanceof Student);// true

5. 方式五：构造函数+原型的组合模式

• 方式：自定义构造函数，属性在函数中初始化，方法添加到原型上；
• 适用场景：需要创建多个类型确定的对象；

function Person(name, age) {
	//在构造函数中只初始化一般函数
	this.name = name;
	this.age = age;
};
Person.prorotype.setName = function(name) {
	this.name = name;
};
var p1 = new Person("Tom", 23);
var p2 = new Person("Jack", 24);

二、继承模式

1. 原型链继承

（1）方式

• 定义父类型构造函数；
• 给父类型的原型添加方法；
• 定义子类型的构造函数；
• 创建父类型的对象赋值给子类型的原型；
• 将子类型原型的构造属性设置为子类型；
• 给子类型原型添加方法；
• 创建子类型的对象：可以调用父类型的方法；
  （2）关键
• 子类型的原型为父类型的一个实例对象；

//父类型
function Supper() {
	this.supProp = "Supper property";
}
Supper.prototype.showSupperProp = function() {
	console.log(this.supProp);
};
//子类型
function Sub() {
	this.subProp = "Sub property";
}
//子类型的原型为父类型的一个实例对象
Sub.prototype = new Supper();
//让子类型的原型的constructor指向子类型
Sub.prototype.constructor = Sub;
Sub.prototype.showSubProp = function () {
	console.log(this.subProp);
}
var sub = new Sub();
sub.showSupperProp();
sub.showSubProp();

2. 借用构造函数继承（假的）；

（1）方式：

• 定义父类型构造函数；
• 定义子类型构造函数；
• 在子类型构造函数中调用父类型构造；
  （2）关键：
• 在子类型构造函数中通过call()调用父类型构造函数；

function Person(name, age) {
	this.name = name;
	this.age = age;
}
function Student(name, age, price) {
	Person.call(this, name, age);// 相当于：this.Person(name, age);这里的this为Student的实例对象
	//this.name =name;
	//this.age = age;
	this.price = price;
}
var s = new Student("Tom", 20, 12000);
console.log(s.name, a.sge, s.price);

3. 组合继承；

（1）方式：原型链+借用构造函数的组合继承

• 利用原型链实现对父类型对象的方法继承；
• 利用call()借用父类型构建函数初始化相同属性；

function Person(name, age) {
	this.name = name;
	this.age = age;
}
Person.prototype.setName = function(name) {
	this.name = name;
}
function Student(name, age, price) {
	Person.call(this, name, age);
	this.price = price;
}
Student.prototype = new Person();// 为了能看到父类型的方法
Student.prototype.constructor = Student;//修正constructor属性，否则指向Person
Student.prototype.setPrice = function(price) {
	this.price = price;
}
var s = new Student("Tom", 20, 12000);
s.setName("Bob");
s.setPrice(14000);
console.log(s.name, a.sge, s.price);//Bob 20 14000