原型以及原型鏈的學習

一 原型：

定義：原型是function對像的一個屬性，他定義了構造函數製造出的對象的公共祖先；

1.經過該構造函數產生的對象，能夠繼承該原型的屬性和方法。 原型也是對像。prototype；

Person.prototype.name = 'jams';
		function Person(){
		}
		var person = new Person();
複製代碼

2.當打印：console.log（person.name）時，會先從函數中找看下有沒有這個屬性值，若是沒有就去原型prototype中找；

所以，這時候打印出來的值爲：jams

• prototype 是函數對象默認的屬性，能夠增刪改查；

• 利用原型特色和概念，能夠提取共有屬性；

3.對象如何查看原型——>隱式屬性：proto

proto 中存放的就是構造函數的原型

至關於：在函數中隱藏了一段代碼：

var  this = {

		__proto__: Person.prototype

		} 
複製代碼

舉個例子：

var obj = { name: 'a'}

		var obj1 = obj;

		 obj = {name : 'b'}

		console.log(obj1.name);// 輸出的值爲 a 

		console.log(obj.name);// 輸出的值爲 b 
 		對比：

 		var obj = { name: 'a'}

		var obj1 = obj;

 		 obj.name ='b'

		console.log(obj1.name);// 輸出的值爲 b 

		console.log(obj.name);// 輸出的值爲 b 
複製代碼

緣由： 當你修改obj.name 時，修改的是原型中的值，當你從新附值給obj時（obj={name:'b'}）,至關於從新定義了obj這個變量；

換個理解方式爲，obj.name 是一個指針，而obj 是一個變量；

4.對象如何查看對象的構造函數：constructor；

constructor 是默認自帶的一個屬性，他的值指向原函數；

二 原型鏈：

1.如何構成原型鏈： 一級一級往上找；

舉個例子：

Grand.prototype.lastName = 'a';
		function Grand(){		
		} 
 		var grand = new Grand();
		Father.prototype = grand;
		function Father() {
		this.name =  ' b '; 
		} 
	    var father = new Father(); 
 		Son.prototype = father;
		function Son(){
              this.hobbit = 'smoke';
		}
		var son = new Son(); 
 		console.log( son.name );  // b
		console.log(son.lastName); // a
複製代碼

2.原型鏈上屬性的增刪改查：跟原型上的增刪改查基本一致，其中刪除：delete 只能經過原型prototype 才能刪除原型的值；

Person.prototype = {
		name = 'a',
		sayName : function(){
 			console.log(this.name);
			} 
		}
		function Person(){ 
		 	this.name = 'b';
		} 
 		var person = new Person();
複製代碼

sayName 裏面的this指向是，誰調用的這個方法，this指向誰；

• 因此最終結果person.sayName() 的值爲b

• 而Person.prototype.sayName() 的值爲a

3.絕大多數對象的最終都會繼承自Object.prototype

但不是全部的對象均可以繼承，特例：Object.creat()原型； 例如：object.creat（null） ，該對象沒有prototype原型；

4.原型鏈的重寫： 例如常見的以下原型鏈就是常常被重寫試用的，固然本身定義的原型一樣也是能夠被重寫

Object.prototype.toString
Number.prototype.toString
Array.prototype.toString
Boolean.prototype.toString
String.prototype.toString 
複製代碼

三 call、apply call、apply的做用：能夠藉助別人的函數實現本身的功能 call 能夠該表this指向 例如：

function Person(name,age){
 //this == obj；
this.name = name;
this.age = age; 
} 
var person = new Person( 'a' ,100);
var obj = {}
 
Person.call(obj, 'b' ,300);
複製代碼

這句話的意思就是調用Person的方法，而後將相關值附值給obj，使得obj有相關參數屬性值； 執行結果：obj

{name: "b", age: 300}
//這樣的好處，借用Person的方法來封裝了obj； 
複製代碼

例如：

function Person(name,age,sex){
	this.name  =  name;
	this.age = age;
	this.sex = sex; 
} 
function otherInformation(tel,grade){
	this.tel = tel;
 
	this.grade = grade; 
} 
function Student(name,age,sex,tel,grade) {
	Person.call(this,name,age,sex);
	//歡迎加入全棧開發交流圈一塊兒學習交流：864305860
	otherInformation.call(this,tel,grade)
}  //面向1-3年前端人員
var student = new Student('asd',123,'male',129,2018) ;
   //幫助突破技術瓶頸，提高思惟能力
// 輸出結果：
Student {name: "asd", age: 123, sex: "male", tel: 129, grade: 2018}
複製代碼

call與apply的區別：後面傳的參數形式(或者傳參列表)不一樣； apply 只能傳兩個參數，一個是this，另外一個是數組，例如：

Person.apply(this,[name,age,sex]);
複製代碼

結語

感謝您的觀看，若有不足之處，歡迎批評指正。

本次給你們推薦一個免費的學習羣，裏面歸納移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。 對web開發技術感興趣的同窗，歡迎加入Q羣：864305860，無論你是小白仍是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時天天更新視頻資料。 最後，祝你們早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峯。