JavaScript中幾個重要的屬性(this、constructor、prototype)介紹_基礎知識

this
this表示當前對象，如果在全域作用範圍內使用this，則指稱當前頁面對象window； 如果在函數中使用this，則this指代什麼是根據運行時此函數在什麼對像上被呼叫。 我們也可以使用apply和call兩個全域方法來改變函數中this的具體指向。
先看一個在全局作用範圍內使用this的例子：

複製代碼 代碼如下:

函數中的this是在運行時決定的，而不是函數定義時，如下：

複製程式碼 程式碼如下:

foo() {
console.log(.fruit);
}
fruit = ;
foo();
pack = {
fruit: ,
foo: foo
};
pack.foo();

全域函數apply和call可以用來改變函數中this的指向，如下：

複製程式碼 程式碼如下:

foo() {
console.log(.fruit);
}
fruit = ;
pack = {
fruit:
};
pack = {
fruit:
};

foo .apply(window);
foo.apply(pack);

註：apply和call兩個函數的作用相同，唯一的差異是兩個函數的參數定義不同

。 因為在JavaScript中函數也是對象，所以我們可以看到如下有趣的例子：複製程式碼

程式碼如下:


foo() {
( === window) {
console.log();
}
}
foo.boo = () {
( === foo) {
console.log();
} ( === window) {
console.log();
}
};
foo();

foo.boo();
foo.boo.apply(window);

prototype

prototype本質上還是一個JavaScript物件。 並且每個函數都有一個預設的prototype屬性。 如果這個函數被用在建立自訂物件的場景中，我們稱這個函數為建構函式。 例如下面一個簡單的場景：複製程式碼

程式碼如下:


Person(name) {
.name = name;
}
Person.prototype = {
getName: () {
.name;
}
}

zhang = Person() ;
console.log(zhang.getName());


作為類比，我們考慮下JavaScript中的資料型態- 字串（String）、數字（Number）、陣列（Array ）、物件（Object）、日期（Date）等。 我們有理由相信，在JavaScript內部這些型別都是作為建構子來實現的，例如：
Array() {
}
arr1 = Array(1, 56, 34, 12);
arr2 = [1, 56, 34, 12];
同時對陣列操作的許多方法（例如concat、join、push）應該也是在prototype屬性中定義的。
實際上，JavaScript所有的固有資料類型都具有唯讀的prototype屬性（這是可以理解的：因為如果修改了這些類型的prototype屬性，則哪些預先定義的方法就消失了）， 但是我們可以向其中添加自己的擴展方法。
Array.prototype.min = () {
min = [0];
( i = 1; i ([i] min = [i];
}
}
min;
};
console.log([1, 56, 34, 12].min());
注意：這裡有一個陷阱，在Array的原型中加入擴充方法後，當使用for-in循環數組時，這個擴充方法也會被循環出來。
下面的程式碼說明這一點（假設已經向Array的原型中擴展了min方法）：
arr = [1, 56, 34, 12];
total = 0;
( i arr) {
total = parseInt(arr[i], 10);
}
console.log(total);
解決方法也很簡單：
arr = [1, 56 , 34, 12];
total = 0;
( i arr) {
(arr.hasOwnProperty(i)) {
total = parseInt(arr[i], 10);
} } console.log(total);

constructor

constructor總是指向建立目前物件的建構子。例如下面範例： 複製程式碼

程式碼如下:

arr = [1, 56, 34, 12];
console.log(arr.constructor === Array);
Foo = () { };
console.log (Foo.constructor === Function);
obj = Foo();
console.log(obj.constructor === Foo);
console.log(obj.constructor.constructor === Function);

但是當constructor遇到prototype時，有趣的事情就發生了。
我們知道每個函數都有一個預設的屬性prototype，而這個prototype的constructor預設指向這個函數。如下例所示：

複製程式碼 程式碼如下:

Person(name) { .name = name;
};
Person.prototype.getName = () {
.name;
};
p = Person();
console.log( p.constructor === Person);
console.log(Person.prototype.constructor === Person);
console.log(p.constructor.prototype.constructor === Person);

當時當我們重新定義函數的prototype時（注意：和上例的區別，這裡不是修改而是覆蓋）， constructor的行為就有點奇怪了，如下示例：

複製程式碼 程式碼如下:

Person(name) {
.name = name;
}; 🎜>Person.prototype = {
getName: () {
.name;
}
};
p = Person();
console.log(p.constructor = == Person);
console.log(Person.prototype.constructor === Person);
console.log(p.constructor.prototype.constructor === Person);


為什麼呢？

原來是因為覆蓋Person.prototype時，等價於進行以下程式碼操作：

複製程式碼 程式碼如下:

Person.prototype = Object({

getName: () {
.name;
}
});


而🎜>而總是指向建立自身的建構函數，所以此時Person.prototype.constructor === Object，即是：

複製程式碼程式碼如下:

Person(name) {

.name = name;
};
Person.prototype = {
getName: () {
. name;
}
};
p = Person();
console.log(p.constructor === Object);
console.log(Person.prototype.constructor == = Object);
console.log(p.constructor.prototype.constructor === Object);


怎麼修正這種問題呢？方法也很簡單，重新覆蓋Person.prototype.constructor即可：

複製代碼 代碼如下:

Person(name) {

.name = name;
};
Person.prototype = Object({
getName: () {
.name;
}
});
Person.prototype.constructor = Person;
p = Person();
console.log(p.constructor === Person);
console.log(Person. prototype.constructor === Person);
console.log(p.constructor.prototype.constructor === Person);