js 創建對象、原型鏈、構造函數

1,對象的原型鏈

JavaScript對每個創建的對象都會設置一個原型,並指向它的原型對象。
js 訪問對象的原型鏈條:
當我們用obj.xxx訪問一個對象的屬性時,
JavaScript引擎先在當前對象上查找該屬性,如果沒有找到,就到其原型對象上找,如果還沒有找到,就一直上溯到Object.prototype對象,最後,如果還沒有找到,就只能返回undefined。

例如,創建一個Array對象:
var arr = [1, 3, 5];
//其原型鏈是:
arr(當前對象) ----> Array.prototype(原型對象) ----> Object.prototype ----> null
//Array.prototype定義了indexOf()、shift()等方法,因此你可以在arr對象上直接調用這些方法。

例如,創建一個方法
function test(){}
//其原型鏈是:
test ----> Function.prototype ----> Object.prototype ----> null

2,構造函數

除了直接用{ … }創建一個對象外,JavaScript還可以用一種構造函數的方法來創建對象。

2.1,通過構造函數創建對象

function Student(name) {
    this.name = name;
    this.hello = function () {
        alert('Hello, ' + this.name + '!');
    }
}
var xiaoming = new Student('小明');
console.log(xiaoming);
xiaoming.name; // '小明'
xiaoming.hello(); // Hello, 小明!

var xiaohong = new Student('小紅');

//xiaoming的原型鏈是:
xiaoming ----> Student.prototype ----> Object.prototype ----> null
xiaohong ----> Student.prototype ----> Object.prototype ----> null

打印結果如下:
在這裏插入圖片描述

1, xiaoming和xiaohong各自的name不同,這是對的,否則我們無法區分誰是誰了。

2, xiaoming和xiaohong各自的hello是一個函數,但它們是兩個不同的函數,雖然函數名稱和代碼都是相同的!

3,如果我們通過new Student()創建了很多對象,這些對象的hello函數實際上只需要共享同一個函數就可以了,這樣可以節省很多內存。

4,要讓創建的對象共享一個hello函數,根據對象的屬性查找原則,我們只要把hello函數移動到xiaoming、xiaohong這些對象共同的原型上就可以了,也就是Student.prototype:

注意,如果不寫new,這就是一個普通函數,它返回undefined。但是,如果寫了new,它就變成了一個構造函數,
它綁定的this指向新創建的對象,並默認返回this,也就是說,不需要在最後寫return this;。

用new Student()創建的對象還從原型上獲得了一個constructor屬性,它指向函數Student本身:(可以用來判斷是否是一個數組)

xiaoming instanceof Student; // true

2.1,通過構造函數定義屬性,原型定義方法來創建對象
優點:與構造函數方法相比,此方法可以使創建多個對象時,達到方法共享,從而減少內存佔用。

function Student(props) {
    this.name = props.name || '匿名'; // 默認值爲'匿名'
    this.grade = props.grade || 1; // 默認值爲1
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
};
var xiaoming = new Student('小明');
console.log(xiaoming);

在這裏插入圖片描述

參考鏈接: https://www.liaoxuefeng.com/wiki/1022910821149312/1023022043494624

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章