Javascript中this、prototype、constructor的理解

最新推荐文章于 2022-04-25 12:09:39 发布

转载最新推荐文章于 2022-04-25 12:09:39 发布 · 292 阅读

javascript 专栏收录该内容

93 篇文章

订阅专栏

本文深入解析Javascript中的this、prototype、constructor三个关键字，包括它们的基本概念、使用方法及应用场景，通过代码示例详细阐述了每个关键字的特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http://www.cnblogs.com/phpmix/articles/1734031.html

Javascript中this、prototype、constructor的理解

在Javascript面向对象的编程中我们常常会见到这三个关键字：this、prototype、constructor。
对这三个关键字的理解是对Javascript面向对象编程理解的要点

一、首先我们来说说“this”：
　　1、this表示当前对象；
　　2、如果在全局作用范围内使用this，则指代当前页面对象window；
　　3、如果在函数中使用this，则this指代什么是根据运行时此函数在什么对象上被调用
　　4、我们还可以使用apply和call两个全局方法来改变函数中this的具体指向。

在FireBug的控制台中验证一番吧：

代码

   
    //
     定义一个全局函数   
    

    function
     foo() {   
    console.log(
    this
    .fruit);   
}   

    //
     定义一个全局变量，等价于window.fruit = "apple";   
    

    var
     fruit 
    =
     
    "
    apple
    "
    ;   

    //
     此时函数foo中this指向window对象   
    
//
     这种调用方式和window.foo();是完全等价的   
    

    foo();  
    //
     "apple"   
    

      

    //
     自定义一个对象，并将此对象的属性foo指向全局函数foo   
    

    var
     pack 
    =
     {fruit:
    "
    orange
    "
    , foo:foo};   

    //
     此时函数foo中this指向window.pack对象   
    

    pack.foo(); 
    //
     "orange"

下面在来看看apply和call是如何来改变this的指向的

代码

   
    //
     定义一个全局函数   
    

    function
     foo() {   
    console.log(
    this
    .fruit);   
}   
           

    //
     定义一个全局变量   
    

    var
     fruit 
    =
     
    "
    apple
    "
    ;   

    //
     自定义一个对象   
    

    var
     pack 
    =
     {fruit:
    "
    orange
    "
    };   
           

    //
     等价于window.foo();   
    

    foo.apply(window);  
    //
     "apple"   
    
//
     此时foo中的this === pack   
    

    foo.apply(pack);
    //
     "orange"

因为在JavaScript中函数也是对象，所以我们可以看到如下的例子

代码

   
    //
     定义一个全局函数
    

    function
     foo() {
    
    if
     (
    this
     
    ===
     window) {
        console.log(
    "
    this is window.
    "
    );
    }
}
        

    //
     函数foo也是对象，所以可以定义foo的属性boo为一个函数
    

    foo.boo 
    =
     
    function
     () {
    
    if
     (
    this
     
    ===
     foo) {
        console.log(
    "
    this is foo.
    "
    );
    } 
    else
     {
        
    if
     (
    this
     
    ===
     window) {
            console.log(
    "
    this is window.
    "
    );
        }
    }
};

    //
     等价于window.foo();
    

    foo();  
    //
     this is window.
    

            

    //
     可以看到函数中this的指向调用函数的对象
    

    foo.boo();  
    //
     this is foo.
    

            

    //
     使用apply改变函数中this的指向
    

    foo.boo.apply(window);  
    //
     this is window.

二、什么是原型(prototype)

　　1、prototype本质上还是一个JavaScript对象；

　　2、每个函数都有一个默认的prototype属性；

　　3、通过prototype我们可以扩展Javascript的内建对象

如果这个函数被用在创建自定义对象的场景中，我们称这个函数为构造函数。比如：

代码

   
    //
     构造函数   
    

    function
     Person(name) {   
    
    this
    .name 
    =
     name;   
}   

    //
     定义Person的原型，原型中的属性可以被自定义对象引用   
    

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

    var
     zhang 
    =
     
    new
     Person(
    "
    ZhangSan
    "
    );   
console.log(zhang.getName());   
    //
     "ZhangSan"

我们可以通过prototype扩展Javascript的内建对象，例如：

代码

   
    //
     向JavaScript固有类型Array扩展一个获取最小值的方法   
    

    Array.prototype.min 
    =
     
    function
     () {   
    
    var
     min 
    =
     
    this
    [
    0
    ];   
    
    for
     (
    var
     i 
    =
     
    1
    ; i 
    <
     
    this
    .length; i
    ++
    ) {   
        
    if
     (
    this
    [i] 
    <
     min) {   
            min 
    =
     
    this
    [i];   
        }   
    }   
    
    return
     min;   
};   
           

    //
     在任意Array的实例上调用min方法   
    

    console.log([
    1
    , 
    56
    , 
    34
    , 
    12
    ].min());  
    //
     1

注意：这里有一个陷阱，向Array的原型中添加扩展方法后，当使用for-in循环数组时，这个扩展方法也会被循环出来。

下面的代码说明这一点（假设已经向Array的原型中扩展了min方法）：

  
   var
    arr 
   =
    [
   1
   , 
   56
   , 
   34
   , 
   12
   ];   

   var
    total 
   =
    
   0
   ;   

   for
    (
   var
    i 
   in
    arr) {   
    total 
   +=
    parseInt(arr[i], 
   10
   );   
}   
console.log(total);   
   //
    NaN

解决方法也很简单：

  
   var
    arr 
   =
    [
   1
   , 
   56
   , 
   34
   , 
   12
   ];   

   var
    total 
   =
    
   0
   ;   

   for
    (
   var
    i 
   in
    arr) {   
    
   if
    (arr.hasOwnProperty(i)) {   
        total 
   +=
    parseInt(arr[i], 
   10
   );   
    }   
}   
console.log(total);   
   //
    103

三、构造器(constructor)

1、constructor始终指向创建当前对象的构造（初始化）函数。
2、每个函数都有一个默认的属性prototype，而这个prototype的constructor默认指向这个函数

我们来看个例子：

代码

   
    //
     等价于 var arr = 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   
    
//
     由构造函数实例化一个obj对象   
    

    var
     obj 
    =
     
    new
     Foo();   
console.log(obj.constructor 
    ===
     Foo); 
    //
     true   
    

               

    //
     将上面两段代码合起来，就得到下面的结论   
    

    console.log(obj.constructor.constructor 
    ===
     Function); 
    //
     true

但是当constructor遇到prototype时，有趣的事情就发生了。
我们知道每个函数都有一个默认的属性prototype，而这个prototype的constructor默认指向这个函数。如下例所示：

代码

   
    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

当时当我们重新定义函数的prototype时（注意：和上例的区别，这里不是修改而是覆盖）， 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始终指向创建自身的构造函数，所以此时Person.prototype.constructor === Object

怎么修正这种问题呢？方法也很简单，重新覆盖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