javascript之function的this

[color=green][size=medium][b]javascript之function的this[/b][/size][/color]

[color=indigo][b][size=medium]一、this 的定义 与 函数的调用[/size] [/b][/color]

在 javascript 中， function 中的 this 指代的是： 调用 function 执行时的上下文。
也就是说，调用哪个对象的 function，this就指代哪个对象。默认是 window 对象。

[b]1. this 可以指代一个普通对象[/b]

var Bucky = {
    pringtFirstName: function(){
        console.log("My name is Bucky.");
        console.log( this === Bucky );   // true
    }
}
Bucky.pringtFirstName();

[b]2. this 可以指代 默认的 window 对象 [/b]

function doSomethingWorthless(){
    console.log("I am worthless.");
    console.log( this === window );      // true
}
doSomethingWorthless();                  // window.doSomethingWorthless(); 

[b]3. this 可以指代 function 对象的 prototype 对象[/b]

var foo = function(){};
foo.prototype.sayHello = function(){
    this.name = "Hello,World!"; 
}
foo.prototype.sayHello();

console.log(foo.prototype.name);     // "Hello,World!"

[b]4. this 可以指代 function 对象的 一个实例 [/b]

foo = function(){} 
foo.prototype.sayHello = function(){
    this.name = "Hello World !";
} 

var f = new foo();
f.sayHello();

console.log(f.name);     // "Hello World !";

可以看出：
1） 调用哪个对象的 function , this 就指代哪个对象。
2） 所调用的对象，即：function运行时的上下文。
3） this 与 怎样调用 function 有关。


[color=indigo][b][size=medium]二、函数运行时，this 的引用[/size] [/b][/color]

[b]1. this 可以在 function 的 prototype 对象中被引用[/b]

foo = function(){   
    this.name = "Foo function.";   
}   

foo.prototype.sayHello = function(){  
    console.log( this.name );     //"Foo function."   
}   

var f = new foo();   
f.sayHello();                     // sayHello() 运行的上下文环境是 f 对象

[color=indigo][b][size=medium]三、function 中与 this 相关的两个函数： apply(), call() [/size][/b][/color]

前面说了，既然 this 是与调用 function 的对象有关。
那么，当调用对象的 function 时，是否可以指定一个运行时的上下文 this 对象？


1、理解 function 的 apply() 方法。

“[url=https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply]The apply() method calls a function with a given this value and arguments provided as an array.[/url]”

apply 什么呢？ 把当前的对象（只要类型是 object 即可） apply 给 function，作为该 function 的 this 对象。
apply 方法针对的是将要执行的 function 的 this。 它可以在调用函数时，指定一个它的 this 对象。
即：在已经有预设定值的对象上，继续进行this的创建。

1) this 指向执行函数的对象 - 将 function 作为参数

foo = function(){   
    this.name = "Foo function.";   
}   

foo.prototype.sayHello = function(){  
    var me = this;             // this 在这里是 window 对象。

    console.log(me.name);      // null
    console.log(this.f.name);  //"Foo function."
}   

var f = new foo();   
setTimeout(f.sayHello, 1000);   // 运行的是 window.setTimeout()

2) this 指向执行函数的对象 - 直接执行函数

foo = function(){   
    this.name = "Foo function.";   
}   

foo.prototype.sayHello = function(){  
    var me = this;             // this 在这里是 f 对象。

    console.log(me.name);      // "Foo function."
    console.log(this.f.name);  // 报错：f 未定义
}   

var f = new foo();   
f.sayHello();                  // 运行的是 f 

3) this 指向执行函数的对象 - 指定一个 this 执行

foo = function(){   
    this.name = "Foo function.";   
}   

foo.prototype.sayHello = function(){  
    var me = this;             // this 在这里是 window 对象。

    console.log(me.name);      // null
    console.log(this.f.name);  //"Foo function."
}   

var f = new foo();   
f.sayHello.apply(this, window); // 指定 this 为 window 对象

apply() 方法有两个目地:

1. 指定函数执行时的 this 对象；
2. 运行函数。
（这个目地似乎没有通过从 apply 的方法名称上体现出来，
或许应该叫： apply_and_run 更能体现出这个方法的作用 ）


———————————————————————————————————————————————————————————————————————————


[color=indigo][b]扩展阅读：function 中与 this 相关的另一个函数： bind() [/b][/color]


The [url=https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind]bind()[/url] method creates a new function that, when called, has its [color=blue][i]this[/i][/color] keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

对比 apply() / call()：
apply()/ call() 用来调用（执行）函数，而 bind() 用来创建函数。

[b]Syntax[/b]

fun.bind(thisArg[, arg1[, arg2[, ...]]])

[b]Parameters[/b]

[i][color=green]thisArg[/color][/i]
The value to be passed as the this parameter to the target function when the bound function is called. The value is ignored if the bound function is constructed using the new operator.

[color=green][i]arg1, arg2, ...[/i][/color]
Arguments to prepend to arguments provided to the bound function when invoking the target function.

this.x = 9; 
var module = {
  x: 81,
  getX: function() { return this.x; }
};

module.getX(); // 81

var retrieveX = module.getX;
retrieveX();  // returns 9 - The function gets invoked at the global scope


// Create a new function with 'this' bound to module
// New programmers might confuse the
// global var x with module's property x
var boundGetX = retrieveX.bind(module);
boundGetX(); // 81

参考：
Preserving a reference to “this” in JavaScript prototype functions
[url]http://stackoverflow.com/questions/2025789/preserving-a-reference-to-this-in-javascript-prototype-functions[/url]


—————————————

javascript 函数基础系列文章

[url=http://lixh1986.iteye.com/blog/1955314]1、JavaScript之变量的作用域[/url]
[url=http://lixh1986.iteye.com/blog/2028899]2、javascript之变量类型与变量声明及函数变量的运行机制[/url]
[url=http://lixh1986.iteye.com/blog/1947017]3、javaScript之function定义[/url]
[url=http://lixh1986.iteye.com/blog/1896682]4、javascript之function的prototype对象[/url]
[url=http://lixh1986.iteye.com/blog/1891833]5、javascript之function的(closure)闭包特性[/url]
[url=http://lixh1986.iteye.com/blog/1960343]6、javascript之function的this[/url]
[url=http://lixh1986.iteye.com/blog/1943409]7、javascript之function的apply(), call()[/url]


___________


javascript 面向对象编程系列文章：

[url=http://lixh1986.iteye.com/blog/1958956]1、javaScript之面向对象编程[/url]
[url=http://lixh1986.iteye.com/blog/2332467]2、javascript之面向对象编程之属性继承[/url]
[url=http://lixh1986.iteye.com/blog/2348442]3、javascript之面向对象编程之原型继承[/url]


-


-
引用请标明
原文出处： http://lixh1986.iteye.com/blog/1960343


-