溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1概述
ES6， 全稱 ECMAScript 6.0 ，2015.06 發版。在ES6之前，對象不是基于類創建的，而是用一種稱為構造函數的特殊函數來定義對象和它們的特征。
2構造函數
構造函數是一種特殊的函數，主要用來初始化對象，即為對象成員變量賦初始值，它總與 new 一起使用。我們可以把對象中一些公共的屬性和方法抽取出來，然后封裝到這個函數里面。
// 利用構造函數創建對象
function Person(uname, age) {
this.uname = uname;
this.age = age;
this.sing = function() {
console.log('我會唱歌');
}
}
var ldh = new Person('劉德華', 18);
var zxy = new Person('張學友', 19);
console.log(ldh);
ldh.sing();
zxy.sing();
在 JS 中，使用構造函數時要注意以下兩點：
構造函數用于創建某一類對象，其首字母要大寫構造函數要和 new 一起使用才有意義
（1）構造函數執行過程
new 在執行時會做四件事情：
① 在內存中創建一個新的空對象。
② 讓 this 指向這個新的對象。
③ 執行構造函數里面的代碼，給這個新對象添加屬性和方法。
④ 返回這個新對象（所以構造函數里面不需要 return ）。
（2）構造函數的成員
JavaScript 的構造函數中可以添加一些成員，可以在構造函數本身上添加，也可以在構造函數內部的 this 上添加。通過這兩種方式添加的成員，就分別稱為靜態成員和實例成員。
//靜態成員 在構造函數本身上添加的成員 sex 就是靜態成員 // 靜態成員只能通過構造函數來訪問 Person.sex = '男'; console.log(Person.sex);
function Person(uname) {
this.uname = uname;
}
3構造函數原型prototype
構造函數通過原型分配的函數是所有對象所共享的。
JavaScript 規定，每一個構造函數都有一個 prototype 屬性，指向另一個對象。注意這個 prototype 就是一個對象，這個對象的所有屬性和方法，都會被構造函數所擁有。
我們可以把那些不變的方法，直接定義在 prototype 對象上，這樣所有對象的實例就可以共享這些方法。
function Person(uname, age) {
this.uname = uname;
this.age = age;
// this.sing = function() {
// console.log('我會唱歌');
// }
}
// 一般情況下,我們的公共屬性定義到構造函數里面, 公共的方法我們放到原型對象身上
Person.prototype.sing = function() {
console.log('我會唱歌');
}
var ldh = new Person('劉德華', 18);
var zxy = new Person('張學友', 19);
console.log(ldh.sing === zxy.sing); //true
ldh.sing();
zxy.sing();
4 對象原型 __proto__
對象都會有一個屬性 __proto__ 指向構造函數的 prototype 原型對象，之所以我們對象可以使用構造函數 prototype 原型對象的屬性和方法，就是因為對象有__proto__原型的存在。
function Person(uname, age) {
this.uname = uname;
this.age = age;
}
Person.prototype.sing = function() {
console.log('我會唱歌');
}
var mingo = new Person('小明', 18);
var zxy = new Person('張學友', 19);
mingo.sing();
console.log(mingo); // 對象身上系統自己添加一個 __proto__ 指向我們構造函數的原型對象 prototype
console.log(mingo.__proto__ === Person.prototype); //true
__proto__對象原型和原型對象prototype是等價的__proto__），就是Person構造函數的原型對象prototype。)__proto__對象原型的意義就在于為對象的查找機制提供一個方向，或者說一條路線，但是它是一個非標準屬性， 因此實際開發中，不可以使用這個屬性，它只是內部指向原型對象 prototype
5constructor 構造函數
對象原型 __proto__和構造函數prototype原型對象(其實指的就是同一個)里面有一個屬性 constructor 屬性 ，constructor 我們稱 為構造函數，因為它指回構造函數本身。
constructor 主要用于記錄該對象引用于哪個構造函數，它可以讓原型對象重新指向原來的構造函數。
一般情況下，對象的方法都在構造函數的原型對象中設置。如果有多個對象的方法，我們可以給原型對象采取對象形式賦值，但是這樣就會覆蓋構造函數原型對象原來的內容，這樣修改后的原型對象 constructor 就不再指向當前構造函數了。
此時，我們可以在修改后的原型對象中，添加一個 constructor 指向原來的構造函數。
function Person(uname, age) {
this.uname = uname;
this.age = age;
}
// 很多情況下,我們需要手動的利用constructor 這個屬性指回 原來的構造函數
Person.prototype = {
// 如果我們修改了原來的原型對象,給原型對象賦值的是一個對象,則必須手動的利用constructor指回原來的構造函數
constructor: Person,
sing: function() {
console.log('我會唱歌');
},
movie: function() {
console.log('我會演電影');
}
}
var mingo = new Person('小明', 18);
var zxy = new Person('張學友', 19);
console.log(Person.prototype);
console.log(mingo.__proto__);
console.log(Person.prototype.constructor);
console.log(mingo.__proto__.constructor);
6原型鏈
每個構造函數都有一個原型對象，原型對象都包含一個指向構造函數的指針，而實例都包含一個指向原型對象的內部指針。那么假如我們讓原型對象等于另一個類型的實例，結果會怎樣？顯然，此時的原型對象將包含一個指向另一個原型的指針，相應地，另一個原型中也包含著一個指向另一個構造函數的指針。假如另一個原型又是另一個類型的實例，那么上述關系依然成立。如此層層遞進，就構成了實例與原型的鏈條。這就是所謂的原型鏈的基本概念。——摘自《javascript高級程序設計》
function Person(uname, age) {
this.uname = uname;
this.age = age;
}
Person.prototype.sing = function() {
console.log('我會唱歌');
}
var mingo = new Person('小明', 18);
// 1. 只要是對象就有__proto__ 原型, 指向原型對象
console.log(Person.prototype);
console.log(Person.prototype.__proto__ === Object.prototype);//true
// 2.我們Person原型對象里面的__proto__原型指向的是 Object.prototype
console.log(Object.prototype.__proto__);
// 3. 我們Object.prototype原型對象里面的__proto__原型 指向為 null
console.log(Object);
Object 是 JavaScript 中最頂級的對象，其它所有對象都是基于它的，包括你創建的函數
7JavaScript 的成員查找機制(基于原型鏈規則)
① 當訪問一個對象的屬性（包括方法）時，首先查找這個對象自身有沒有該屬性。
② 如果沒有就查找它的原型（也就是 __proto__指向的 prototype 原型對象）。
③ 如果還沒有就查找原型對象的原型（Object的原型對象）。
④ 依此類推一直找到 Object 為止（null）。
⑤ __proto__對象原型的意義就在于為對象成員查找機制提供一個方向，或者說一條路線。
8 原型對象this指向
1構造函數中的this 指向我們實例對象
2原型對象里面放的是方法, 這個方法里面的this 指向的是 這個方法的調用者, 也就是這個實例對象
function Person(uname, age) {
this.uname = uname;
this.age = age;
}
var that;
Person.prototype.sing = function() {
console.log('我會唱歌');
that = this;
console.log(this);
}
var mingo = new Person('小明', 18);
// 1. 在構造函數中,里面this指向的是對象實例 mingo
// 2.原型對象函數里面的this 指向的也是 實例對象 mingo
mingo.sing();
console.log(that === mingo); //true
總結
到此這篇關于一文秒懂JavaScript構造函數、實例、原型對象以及原型鏈的文章就介紹到這了,更多相關JavaScript構造函數、實例、原型對象及原型鏈內容請搜索億速云以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
