JS物件導向的程式設計

Jsp發表於2018-05-17
JS物件程式設計

new操作符： 1.建立一個空物件，並且this變數引用該物件，同時繼承了該函式的原型 2.屬性和方法被加入到this引用的物件中 3.新建立的物件由this所引用

var obj = {};
obj._proto_ = Base.prototype;
Base.call(obj);
複製程式碼

一：理解物件

1.通過建立一個Object例項來建立物件

var person = new Object();
person.name = 'Nico';
person.age = 29;
person.sayName = function(){
	console.log(this.name);
};
複製程式碼

2.物件字面量建立物件

var person = {
	name:'Nico',
	age:'29',
	sayName:function(){
		console.log(this.name);
	}
}
複製程式碼

二：屬性型別：資料屬性型別和訪問器屬性

三：建立物件

1.工廠模式：函式來封裝介面建立物件

function createPerson(name,age,job){
	var o = new Object();
	o.name = name;
	o.job = job;
	o.sayName = function(){
		console.log(this.name);
	}
	return o;
}
var person = createPerson('bob','18','engineer');
複製程式碼

2.建構函式模式

function Person(name,age){
	this.name = name;
	this.age = age;
	this.sayName = function(){
		console.log(this.name);
	};
}
var person1 = new Person('Ni','18');
var person2 = new Person('bob','19');
複製程式碼

要建立Person新例項，必須使用new操作符呼叫建構函式： a.建立一個新物件 ；b.將建構函式的作用域賦給新物件，因此this指向了這個新物件 ；c.執行建構函式的程式碼，為這個新物件新增屬性；d.返回新物件

person1和person2物件都有一個constructor建構函式屬性，指向Person 

console.log(person1.constructor == Person); //true
複製程式碼

instanceof檢測物件型別，既是Person的例項，也是Object的例項： 

person1 instanceof Object //true
複製程式碼

建構函式的問題：

this.sayName = new Function(console.log(this.name));
person1.sayName == person2.sayName //false
複製程式碼

3.原型模式：所有物件例項共享屬性和方法 

每個函式都有一個prototype屬性，這個屬性是一個指標，指向一個物件，這個物件的用途 就是通過呼叫建構函式而建立的那個物件例項的原型物件。

function Person(){

}
Person.prototype.name = "Ni";
Person.prototype.age = '19';
Person.prototype.sayName = function(){
	console.log(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.sayName == person2.sayName //true
複製程式碼

a.理解原型物件 建立新函式會為函式建立一個prototype屬性，這個屬性指向函式的原型物件。在預設情況下， 所有原型物件都會獲得一個constructor建構函式屬性，這個屬性是一個指向prototype 屬性所在函式的指標。

通過isPrototypeOf()確定物件之間的關係：Person.prototype.isPrototypeOf(person1) //true
複製程式碼

Object.getPrototypeOf()返回物件的原型：
Object.getPrototypeOf(person1) == Person.prototype //true
複製程式碼

hasOwnPrototype()方法檢測屬性在原型中還是在例項中：
person1.hasOwnPrototype('name')  //true
複製程式碼

4.組合使用建構函式和原型模式：建構函式用於定義例項屬性，原型模式用於定義方法和共享的屬性 

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

var person1 = new Person('Jsp','18');
var person2 = new Person('Jap','19');
person1.friends.push('Jay');
console.log(person1.friends == person2.friends) //false
console.log(person1.sayName == person2.sayName) //true
複製程式碼

5.動態原型模式 

在已經建立了例項的情況下重寫原型會切斷現有例項與原型之間的聯絡 

function Person(age,name){
	//屬性
	this.name = name;
	this.age = age;

	//方法
	if(typeof this.sayName != "function"){
		Person.prototype.sayName = function(){
			console.log(this.name);
		};
	}
}
複製程式碼

6.寄生建構函式：和工廠模式很像 

function Person(name,age){
	var o = new Object();
	o.name = name;
	o.age = age;
	o.sayName = function(){
		console.log(this.name);
	};
	return o;
}
var friend = new Person('Jsp','18');
friend.sayName();
複製程式碼

7.穩妥建構函式模式：適合在安全的環境或防止資料被其他改動時使用 

a.新建立物件的例項方法不引用this；b.不使用new呼叫建構函式

unction Person(name,age){
	var o = new Object();
	//可以在這裡新增私有變數和函式

	//新增方法
	o.sayName = function(){
		console.log(name);
	};
	return o;
}
除了sayName()方法，沒有其他方式訪問資料成員
複製程式碼


相關文章