JS的作用域链与this指向

JS的作用域链是在函数创建时创建的。而this对象是在函数运行期间绑定的。

下面看几个例子，说明JS的作用域链和this是两套分离的链。

1）

var name = 'window下的name<br/>';
var resultCon;
function fn1() {
　　resultCon.innerHTML += name;
}

function MyObj() {
　　var name = 'MyObj下的name<br/>';
　　this.doFunction = function() {
　　　　resultCon.innerHTML += name;
　　};
}

window.onload = function() {
　　resultCon = document.getElementsByTagName('p')[0];
　　var name = "onload下的name<br/>";
　　var fn2 = function() {
　　　　resultCon.innerHTML += name;
　　};
　　fn1();//window下的name    fn1()在创建时它的作用域链就是自己的活动对象-->全局环境，因此在这里搜寻name时，先查找自身没有，然后查找全局发现name='window下的name';
　　fn2();//onload下的name   fn2()创建时，作用域链为自己的活动对象-->window.onload函数-->全局环境，在window.onload下找到了name
　　var obj = new MyObj();
　　obj.doFunction();//MyObj下的name  doFunction()作用域链自己的活动对象-->MyObj的活动对象-->全局环境
};

2）现在把上面的name都改成this.name

var name = 'window下的name<br/>';
var resultCon;
function fn1() {
　　resultCon.innerHTML += this.name;
}

function MyObj() {
　　var name = 'MyObj下的name<br/>';
　　this.doFunction = function() {
　　　　resultCon.innerHTML += this.name;
　　};
}

window.onload = function() {
　　resultCon = document.getElementsByTagName('p')[0];
　　var name = "onload下的name<br/>";
　　var fn2 = function() {
　　　　resultCon.innerHTML += this.name;
　　};
　　fn1();//window下的name   fn1()是在全局环境下调用的，因此this指向window
　　fn2();//window下的name   fn2()也是在全局环境下调用的
　　var obj = new MyObj();
　　obj.doFunction();//undefined    doFunction()中this指向obj，因为MyObj()中name是个局部变量，因此obj.name=undefined,如果把var name=''MyObj下的name<br/>';改为this.name='MyObj下的name<br/>';,那么obj.doFunction()就是'MyObj下的name';
};

可以看到this和作用域是两套分离的链，遵循个自的变量查询逻辑。

this的作用域链，this后的属性或者方法在使用时是先从本实例中查找，如果找到就先返回，如果没找到就接着向上从原型链中查找，如果有多重继承关系，那就一级一级的找上去。

var resultCon;

function MyObj() {
　　this.name = 'MyObj下的name<br/>';
　　this.doFunction = function() {
　　　　resultCon.innerHTML += this.name;
　　};
}
MyObj.prototype.name = 'prototype下的name<br/>';

window.onload = function() {
　　resultCon = document.getElementsByTagName('p')[0];
　　var obj = new MyObj();
　　obj.doFunction();//this指向obj，先看实例中有没有name，找到了MyObj()中的name，因此返回MyObj下的name；
};

如果把MyObj下的name注销掉，那么this就会顺着原型链往上找，返回prototype下的name;

在这里obj的原型链为obj-->MyObj.prototype-->Object.prototype-->null

再来看看call和apply

var name = 'window下的name<br/>';
var resultCon;
function fn1() {
　　resultCon.innerHTML += this.name;
}

function MyObj() {
　　var name = 'MyObj下的name<br/>';
　　this.doFunction = function() {
　　　　resultCon.innerHTML += this.name;
　　};
}

window.onload = function() {
　　resultCon = document.getElementsByTagName('p')[0];
　　var name = "onload下的name<br/>";
　　var fn2 = function() {
　　　　resultCon.innerHTML += this.name;
　　};
　　var myThis = {
　　　　name: "自定义的this的name属性<br/>"
　　};
　　fn1.call(myThis);//自定义的this的name属性
　　fn2.call(myThis);//自定义的this的name属性
　　var obj = new MyObj();
　　obj.doFunction.call(myThis);//自定义的this的name属性
};

call和apply改变了被调用函数的this的指向

最后看下with，with的使用是为了改变被调用函数中变量的查询域。我们把上例中的call和name前的this去掉再加上with来演示with的作用。

var name = 'window下的name<br/>';
var resultCon;
function fn1(myScope) {
　　with (myScope) {
　　　　resultCon.innerHTML += name;
　　}
}

function MyObj(myScope) {
　　var name = 'MyObj下的name<br/>';
　　this.doFunction = function(myScope) {
　　　　with (myScope) {
　　　　　　resultCon.innerHTML += name;
　　　　}
　　};
}

window.onload = function() {
　　resultCon = document.getElementsByTagName('p')[0];
　　var name = "onload下的name<br/>";
　　var fn2 = function(myScope) {
　　　　with (myScope) {
　　　　　　resultCon.innerHTML += name;
　　　　}
　　};
　　var myScope = {
　　　　name : "自定义变量查询域</br>"
　　};

　　fn1(myScope);//自定义变量查询域
　　fn2(myScope);//自定义变量查询域
　　var obj = new MyObj();
　　obj.doFunction(myScope);//自定义变量查询域

};

如果把with这个例子中的name改为this.name的话，同样的输出 window下的name，window下的name，undefined；因为with 只能改变作用域链，this的指向还是保持不变。

看到with的使用并不方便，需要在被调用函数中添加with，有人可能想能不能向下面那样调用来整体改变变量作用域而不去改变被调用函数呢？

with (myScope) {
    fn1();
    fn2();
    var obj = new MyObj();
    obj.doFunction();
}

很遗憾，不可以！所以在一些成熟的框架中随处可见call和apply的使用，却很少用到with，在用JSHint检测js语法的时候with处都标了小红点，在一些js编码指导中也建议尽量少用with，因为with改变了变量的默认查询链，所以会给后期的维护人员一些困惑，还有性能方面的一些考虑，请慎用with。

所有的示例都是摘自http://www.cnblogs.com/longze/p/3542582.html   http://www.cnblogs.com/longze/p/3543242.html