淺聊 js 原型 、原型鏈

這是我參與新手入門的第3篇文章

對應名稱 及對應關係

• prototype:原型 ->函數的一個默認屬性:prototype：對象

• __proto__:原型鏈 -> Object(引用類型)的一個屬性（__proto__:對象）

• 每一個Object(引用類型)的__proto__對應着裏該Object裏的constructor的prototype

原型鏈的理解

function Test() {
  this.a = 1;
}
let test = new Test();
Test.prototype.b = 2;

console.log(Test.__proto__ === Function.prototype); // true
console.log('===', Test.prototype.__proto__ === Object.prototype); // true 
// 見function與Object 的特殊性

能夠總結爲：
test{
	a:1,
	__proto__:Test.prototype={
		b:2，
		_proto__：Object.prototype={
			__proto__ //不存在
 		}
	}
}

複製代碼

因此能夠這樣說

原型鏈 是以一個對象爲基準，以__proto__ 爲鏈接的這條鏈條，直到以Object 點上的prototype 爲止的鏈叫作原型鏈。

以對象原型爲節點，連起來的一條線即爲原型鏈

原型鏈的繼承的理解

function Test() {
  this.a = 1;
}
let test = new Test();
Test.prototype.b = 2;

console.log(test.a) // 1
console.log(test.b) // 2  

當在test的直接對象裏，沒有找到b 屬性，就回去test.__proto__裏去找b 屬性，這叫原型鏈的繼承

function Test() {
  this.a = 1;
  this.b = 222;
}
let test = new Test();
Test.prototype.b = 2;

能夠總結爲
test{
	a:1,
	b:222,
	__proto__:Test.prototype={
		b:2，
		_proto__：Object.prototype={
			__proto__ //不存在
 		}
	}
}

console.log(test.b) // 222 當test的直接對象裏，含有b屬性，則再也不去__proto__裏去找b屬性

複製代碼

Function 與 Object 的特殊性 （函數，對象）

Function

function Test(){}

底層實現：上述代碼 function Test(){},是經過new Function() 構造出來的
// eg: const Test = new Function(); 

// console.log(Function.__proto__)
// console.log(Function.prototype)
// console.log(Function.__proto__ === Function.prototype) // true 特殊點記憶

複製代碼

Function.__proto__ === Function.prototype

Object

const obj = {};
底層實現 const obj = new Objcec();
又typeof Object === 'function' ，function 底層又是經過new Function 構造出來的，
故 console.log(Object.__proto__ === Function.prototype) // TRUE
//console.log(Object.__proto__ ===  Function.__proto__)
複製代碼

Object.__proto__ === Function.__proto__

Object.__proto__ === Function.__proto__

判斷屬性存在的方法

// 當我看個人直接對象裏是否有某個屬性，能夠經過hasOwnProperty('')來進行判斷

test{
	a:1,
	__proto__:Test.prototype={
		b:2，
		_proto__：Object.prototype={
			__proto__ //不存在
 		}
	}
}
console.log(test.hasOwnProperty('a')); // true
console.log(test.hasOwnProperty('b')); //false

當判斷對象所對應的原型鏈上是否有某種屬性
consle.log('a' in test) //true
console.log('b' in test)  // true 

只要在鏈上，就爲true
複製代碼

總結

以上的原型鏈的相關知識，是以簡單方法理解。實際開發中，原型鏈的相關知識是相對複雜的，但願能以小見大的方式，去理解原型，原型鏈的相關知識。

若是以爲還行，請不要吝嗇你的小贊贊哦。