欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript類和繼承 constructor屬性

 更新時間：2010年03月04日 12:47:55   作者：  
本文介紹了JavaScript里面的constructor屬性。這個屬性是理解JavaScript類和繼承的重要基礎。
constructor屬性始終指向創(chuàng)建當前對象的構造函數(shù)。比如下面例子：比如下面例子：
復制代碼 代碼如下:

// 等價于 var foo = new Array(1, 56, 34, 12);
var arr = [1, 56, 34, 12];
console.log(arr.constructor === Array); // true
// 等價于 var foo = new Function();
var Foo = function() { };
console.log(Foo.constructor === Function); // true
// 由構造函數(shù)實例化一個obj對象
var obj = new Foo();
console.log(obj.constructor === Foo); // true
// 將上面兩段代碼合起來，就得到下面的結論
console.log(obj.constructor.constructor === Function); // true

但是當constructor遇到prototype時，有趣的事情就發(fā)生了。
我們知道每個函數(shù)都有一個默認的屬性prototype，而這個prototype的constructor默認指向這個函數(shù)。如下例所示：
復制代碼 代碼如下:

function Person(name) {
this.name = name;
};
Person.prototype.getName = function() {
return this.name;
};
var p = new Person("ZhangSan");
console.log(p.constructor === Person); // true
console.log(Person.prototype.constructor === Person); // true
// 將上兩行代碼合并就得到如下結果
console.log(p.constructor.prototype.constructor === Person); // true

當時當我們重新定義函數(shù)的prototype時（注意：和上例的區(qū)別，這里不是修改而是覆蓋），constructor屬性的行為就有點奇怪了，如下示例：
復制代碼 代碼如下:

function Person(name) {
this.name = name;
};
Person.prototype = {
getName: function() {
return this.name;
}
};
var p = new Person("ZhangSan");
console.log(p.constructor === Person); // false
console.log(Person.prototype.constructor === Person); // false
console.log(p.constructor.prototype.constructor === Person); // false

為什么呢？
原來是因為覆蓋Person.prototype時，等價于進行如下代碼操作：
復制代碼 代碼如下:

Person.prototype = new Object({
getName: function() {
return this.name;
}
});

而constructor屬性始終指向創(chuàng)建自身的構造函數(shù)，所以此時Person.prototype.constructor === Object，即是：
復制代碼 代碼如下:

function Person(name) {
this.name = name;
};
Person.prototype = {
getName: function() {
return this.name;
}
};
var p = new Person("ZhangSan");
console.log(p.constructor === Object); // true
console.log(Person.prototype.constructor === Object); // true
console.log(p.constructor.prototype.constructor === Object); // true

怎么修正這種問題呢？方法也很簡單，重新覆蓋Person.prototype.constructor即可：
復制代碼 代碼如下:

function Person(name) {
this.name = name;
};
Person.prototype = new Object({
getName: function() {
return this.name;
}
});
Person.prototype.constructor = Person;
var p = new Person("ZhangSan");
console.log(p.constructor === Person); // true
console.log(Person.prototype.constructor === Person); // true
console.log(p.constructor.prototype.constructor === Person); // true

相關文章

  • JavaScript 面向對象之命名空間

    JavaScript 面向對象之命名空間

    如果寫一堆function難免會出現(xiàn)變量或函數(shù)的命名沖突，應用了命名空間這種情況就從此杜絕了，而且代碼易于管理。
    2010-05-05
  • JavaScript 繼承詳解（二）

    JavaScript 繼承詳解（二）

    這一章我們將會重點介紹JavaScript中幾個重要的屬性（this、constructor、prototype）， 這些屬性對于我們理解如何實現(xiàn)JavaScript中的類和繼承起著至關重要的作用。
    2009-07-07
  • Javascript 面向對象之重載

    Javascript 面向對象之重載

    在面向對象語言里重載是很重要的一個特性，而JavaScript這個自稱面向對象的語言竟然沒有直接提供重載的功能。
    2010-05-05
  • 編寫可維護面向對象的JavaScript代碼[翻譯]

    編寫可維護面向對象的JavaScript代碼[翻譯]

    編寫可維護面向對象的JavaScript代碼[翻譯]，學習js面向對象編寫的朋友可以參考下。
    2011-02-02
  • javascript new后的constructor屬性

    javascript new后的constructor屬性

    new后的constructor屬性使用說明，需要的朋友可以參考下。
    2010-08-08
  • javascript 寫類方式之四

    javascript 寫類方式之四

    構造函數(shù) + 原型 直接組裝一個類；同一構造函數(shù)將組裝出同一類型
    2009-07-07
  • JavaScript之信息的封裝 js對象入門

    JavaScript之信息的封裝 js對象入門

    下面對代碼的封裝是比較常用的，也比較好理解，只有先掌握了這些，才能更深入的了解面向對于以及json格式的定義方法。
    2010-04-04
  • JS 繼承實例分析

    JS 繼承實例分析

    主要有三種方法: 1. this.method=Parent; this.method=Parent's constructor 2. Parent.call(this,arg,arg,arg.....);3.Parent.apply(this,arg.arg...) //for Array 還是來點實際的吧...
    2008-11-11
  • 關于JavaScript定義類和對象的幾種方式

    關于JavaScript定義類和對象的幾種方式

    在說這個話題之前，我想先說幾句題外話：最近偶然碰到有朋友問我“hoisting”的問題。即在js里所有變量的聲明都是置頂?shù)?，而賦值則是在之后發(fā)生的。
    2010-11-11
  • 再談javascript面向對象編程

    再談javascript面向對象編程

    雖有陳皓《Javascript 面向對象編程》珠玉在前，但是我還是忍不住再畫蛇添足的補上一篇文章，主要是因為javascript這門語言魅力
    2012-03-03

最新評論