javascript中的上下文以及上下文切换
在js里,每个函数都有一个执行的上下文,我们可以通过this来访问。
如:
全局函数
function test(){ var local = this; }
我们发现local等于window(dom根对象),也就是说全局函数实际上是window的一个属性。
同理全局变量也是如此。
比如 var name = ‘phil’; 我们可以通过window[‘name’]或者window.name 来访问。
而当函数是某一个对象的属性的时候,该函数的上下文就是该对象。
var student = {}; student.age = 20; student.getAge = function(){ return this.age; }
当有函数嵌套的时候,事情就变得稍微复杂点了。
var seq = [1,2,3,4]; for(var i in seq){ var name = ‘phil’ + i; window.setTimeout(function(){ $('p’).apend(name); },i*1000) }
有人可能认为输出是phil1phil2phil3phil4,实际上结果是phil4phil4phil4phil4
因为函数window.setTimeout(实际上我们常常会省略掉window)的上下文实际上是window,而函数体中的name实际上就是window.name
他的值就是最后一次循环后的值phil4。
那如果我们需要的结果是phil1phil2phil3phil4那该怎么写:
var seq = [1,2,3,4]; for(var i in seq){ var name = ‘phil’ + i; var obj = {}; obj.name = name; obj.setTimeout = function(){ var local = this; // 该方法是对象obj的属性方法,所以this就是obj window.setTimeout(function(){ $('p’).apend(local.name); // 此处千万不可以用this,因为此处的this实际上是window。 },i*1000) } }
call和apply通常用来修改函数的上下文,函数中的this指针将被替换为call或者apply的第一个参数.
//定义一个人,名字为jack var jack = { name : "jack", age : 26 } //定义另一个人,名字为abruzzi var abruzzi = { name : "abruzzi", age : 26 } //定义一个全局的函数对象 function printName(){ return this.name; } //设置printName的上下文为jack, 此时的this为jack print(printName.call(jack)); //设置printName的上下文为abruzzi,此时的this为abruzzi print(printName.call(abruzzi));
一个参数的时候call和apply的用法一样。