JavaScript中幾個重要的屬性(this、constructor、prototype)介紹

this
this表示當前對象，如果在全域作用範圍內使用this，則指代當前頁面對象window； 如果在函數中使用this，則this指代什麼是根據運行時此函數在什麼對象上被調用。 我們還可以使用apply和call兩個全域方法來改變函數中this的具體指向。
先看一個在全域作用範圍內使用this的例子： 複製代碼 代碼如下:<script type=>
console.log( === window);
console.log(window.alert === .alert);
console.log(.parseInt(, 10));
</script>

函數中的this是在運行時決定的，而不是函數定義時，如下： 複製代碼 代碼如下:foo() {
console.log(.fruit);
}
fruit = ;
foo();
pack = {
fruit: ,
foo: foo
};
pack.foo();

全域函數apply和call可以用來改變函數中this的指向，如下： 複製代碼 代碼如下:foo() {
console.log(.fruit);
}
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 < .length; i++) {
([i] < min) {
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;
}
});

而constructor始終指向建立自身的建構函式，所以此時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);