1. 程式人生 > >懵逼的JavaScript大白(一)——原型鏈

懵逼的JavaScript大白(一)——原型鏈

一、原型鏈

在這裡插入圖片描述
放張圖片鎮鎮場

1、prototype:原型

每個函式都具有一個屬性prototype,值為一個物件。這個屬性其實是給建構函式準備的,其他的函式不使用這個屬性的功能。
prototype屬性用來儲存建構函式中所有需要公用的方法,簡化程式碼的書寫。

		function CreateObj (name, age) {
			this.name = name;
			this.age = age;
		}
		CreateObj.prototype.sayHi = function () {
			console.log('這是sayHi方法');
		};
		var c1 = new CreateObj('jack', 18);
		var c2 = new CreateObj('rose', 21);
		c1.sayHi();
		c2.sayHi();
		console.log(c1.sayHi === c2.sayHi);
		console.log(c1);
		console.log(c2);

在這裡插入圖片描述

2、__proto__屬性

通過觀察物件,我們發現物件具有__proto__屬性,是new給物件設定的。

console.log(CreateObj.prototype === c1.__proto__); // true

這個__proto__與CreateObj.prototype又實際上是同一個物件
物件的屬性訪問方式:首先找自身,自身有,使用;自身沒有,查詢__proto__屬性,如果有,使用。

3、constructor:構造器

constructor是prototype的屬性,但是不是給自己準備的,而是讓建立的物件是用的。
constructor用來描述物件和建構函式之間關係的一種方式。

console.log(CreateObj.prototype.constructor); // 得到建構函式

使用constructor還可以進行物件的型別檢測

console.log(arr.constructor === Array); // true
console.log(arr.constructor === Object); // false

4、prototype的第二種設定方式

使用新物件覆蓋原有的原型物件,寫法較為簡單。但原始的constructor屬性也不存在了,需要自己進行設定。

		function CreateObj (name) {
			this.name = name;
		}
		CreateObj.prototype = {
			sayHi : function () {
				console.log('這是sayHi');
			},
			constructor : CreateObj
		};
		var c1 = new CreateObj('jack');
		console.log(c1.constructor);
		c1.sayHi();

在這裡插入圖片描述

5、三者關係

例項物件:通過建構函式建立的物件。每個例項物件都具有一個__proto__屬性,指向了建構函式的原型物件。
建構函式:用於建立例項物件使用的。每個建構函式都具有一個prototype,指向了原型物件。
原型物件:都具有一個屬性constructor,指向建構函式。
在這裡插入圖片描述