码迷,mamicode.com
首页 > Web开发 > 详细

JS中this的指向

时间:2014-06-04 17:20:38      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:c   style   class   blog   code   java   

JS中this的指向:this在面向对象编程中非常重要,它的值取决于调用的模式。在JS中一共有四种调用模式,方法调用模式、函数调用模式、构造器调用模式和apply调用模式。

 

方法调用模式:当一个函数被保存为对象的一个属性时,我们称它为一个方法。当方法被调用时,this被绑定到该对象。方法可以使用this去访问对象,所以它能从对象中取值或修改该对象。this到对象的绑定发生在调用的时候。通过this可取的它们所属对象的上下文的方法称为公共方法。

bubuko.com,布布扣
var myobj = {
    value: 1,
    inc: function (){
        return this.value
    }
}
myobj.inc(); //输出1
bubuko.com,布布扣

 

函数调用模式:当一个函数并非一个对象的属性时,那么它被当作一个函数来调用。当一个函数被调用时,this被绑定到全局对象。这是语言设计上的一个错误,倘若语句设计正确,当内部函数被调用时,this应该仍然绑定到外部函数的this变量中。幸运的是,有一个很容易的解决方案,如果该方法定义一个变量并给它赋值为this,那么内部函数就可以通过变量访问到this。

bubuko.com,布布扣
var myobj = {value: 1}
var value = 10;
myobj.double = function (){
    var that = this;

    
    var this01 = (function (){
        return that.value;
    })();

    
    var this02 = (function (){
        return this.value;
    })();

    console.log(this01);  //this01输出1
    console.log(this02); //this02输出10
}
myobj.double()
bubuko.com,布布扣

 

构造器调用模式:如果在一个函数前面带上一个new来调用,那么将创建一个隐藏接到该函数的prototype成员的新对象,同时this将会被绑定到那个新对象上。new前缀也会改变return语句的行为。

bubuko.com,布布扣
//创建一个名为Quo的构造器函数
var Quo = function (string){
    this.status = string
}
//给Quo的所有实例提供一个名为getStatus的公用方法
Quo.prototype.getStatus = function (){
    return this.status
}
//构造一个Quo实例
var myQuo = new Quo(‘csh‘);
myQuo.getStatus(); //输出csh
bubuko.com,布布扣

结合new前缀调用的函数被称为构造器函数,按照约定,它们保存在以大写格式命名的变量里。如果调用构造函数时没有在前面加上new,可能会发生非常糟糕的事情。所以大写约定非常重要(不推荐使用构造器函数)。

 

apply调用模式:在JS里面函数是拥有方法的。apply方法让我们构建一个参数数组并用其去调用函数。它也允许我们选择this的值。apply方法接收两个参数。第一个是将被绑定给this的值,第二个就是一个参数数组。当apply第一个参数为空时,this默认调用全局对象。

bubuko.com,布布扣
var add = function (a, b){
    return a + b;
}
var arr = [3, 4];
console.log(add.apply(null, arr)); //输出7

var myOBJ = {name: ‘csh‘};
var myname = function (){
    return this.name;
}
console.log(myname.apply(myOBJ, null));//输出csh
bubuko.com,布布扣

JS中this的指向,布布扣,bubuko.com

JS中this的指向

标签:c   style   class   blog   code   java   

原文地址:http://www.cnblogs.com/zhuifeng/p/3764641.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!