javascript屬於原型繼承

原型特性

-具有物件的特性

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c7132857-2342-4da5-bf87-461e5eb59c90/1567056782450.jpg

用.__proto__查看原型

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/7f07d741-a055-469f-a320-e2d267b4d296/1567049008646.jpg

-原型可共用方法及屬性

proto:Array所指的就是陣列的原型,透過下方測試後可以發現在原型中新增的屬性,陣列a和b中都可以看見 abc:'hi'。

var a = [1,2,3];
//在陣列原型中新增一個屬性,值為'hi'
a.__proto__.abc = 'hi';

var b = ['一','二','三'];
console.log(a);
console.log(b);

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/7afeb17f-d782-4438-880a-7b39bc4cecf1/1567049958517.jpg

透果此方法在原型中新增一個涵式,讓全部Array原型都可以調用

在__proto__原型陣列中新增一個,getLast涵式 功能為{抓出陣列最後一個值},故a⇒3,b⇒三

var a = [1,2,3];

var b = ['一','二','三'];

a.__proto__.getLast = function(){
	return this[this.length - 1];
}

console.log(a.getLast(),b.getLast()); //3 三

在原型中新增一個getName的涵式,透過console.log觀察後,可以發現__proto__中的this也有涵式的特性,__proto__中沒有name所以(family.proto.getName()); ,為undefined

var family = {
	name : '瘦虎家'
}
family.__proto__.getName = function(){
	return this.name;
}
console.log(family.getName());//瘦虎家
console.log(family.__proto__.getName());//undefined

-向上查找

透過查找後,可以在變數a最頂層的__proto__發現新增在變數family.__proto__的getName

var a = [1,2,3];
var b = ['一','二','三'];

var family = {
	name : '瘦虎家'
}
family.__proto__.getName = function(){
	return this.name;
}

console.log(a,b);

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/289f9553-3202-4b88-a6ad-a3f5412962bd/1567057922106.jpg

在b新增一個name,在調用proto裡的getName來驗證

console.log(b.getName()) //靜臭家 ,驗證後沒毛病!

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/9aa61b35-66be-4397-8b5f-8f52aaf4776a/1567058328116.jpg