js小题目之this讲解

在网上看到一道关于js考察this指向的小题目，觉得可以记录一下，因为不仅考察了this指向，还有关于arguments的知识点。先看题目：

var length = 10;
function fn() {
    console.log(this.length)
};
var obj = {
    length: 5, 
    method: function (fn) {
        fn();
        arguments[0]();
        fn.call(obj, 12);
    }
};
obj.method(fn, 1);

如果你以前没看过这道题，此刻你觉得你能搞懂它吗？

以防你不小心瞄到了答案，所以我把答案放在了本文的最末尾处。如果着急你可先往下翻去查看^v^。

 

既然这道题是考察this指向的，那么我就先总结一下this的几个用法吧。
1.方法自执行----默认绑定。
比如：

function wlk(){
    console.log(this);
};
wlk();//在非严格模式指向window，严格模式指向undefined。

2.作为对象属性执行----隐式绑定。
比如：

var obj = {
    name:"wlk",
    sayName:function(){
        console.log(this.name);
    }
}
obj.sayName();//sayName函数作为obj的属性调用，所以this指向obj。

3.call、apply显示调用。
比如：

function wlk(){
    console.log(this);
}

var obj = {
    name:"wlk",
}
wlk.apply(obj)；//apply显示的指定了wlk()函数的this是obj。这个非常明显吧

4.new绑定。
比如：

var Person = function(){
    this.name = "wlk";
}
Person.prototype.sayName=function(){
    console.log(this.name);
}
var p = new Person();
p.sayName();//p是Person的一个实例，p调用了sayNnme方法。

 

其实还有一种出现的比较多的情况：事件绑定时this的执行。
这个其实记住一点：哪个DOM元素触发事件，this就指向那个DOM元素。
比如：

var dom = document.getElementById("wlk");
dom.onclick = function(){
    console.log(this);//this指向id为'wlk'的DOM元素。
}

 

 

正式说一说这道题目吧！

        首先，obj对象调用了method这个函数，并传入两个参数fn函数和数字1;接下来执行method函数，method函数第一行是执行fn,很明显这是我所说的第一种“方法自执行---默认绑定”，那么这里的this是指向全局的，所以fn执行后打印的是全局范围下的length，也就是10。
       method函数的第二行是比较容易出错的，它考察到了arguments。要注意，arguments是对象---类数组对象。所以这里的arguments[0]不是字面意义上取数组的第一个元素，而是调用对象属性和方法的方式[]（.点调用和关联数组调用[]）。于是arguments[0]的真正意思是arguments对象调用自己的第一个属性，这个属性就是第一个参数fn。所以arguments[0]()其实是我上文提到的第二种“作为对象属性执行---隐式绑定”。再提一点，这里argument对象的属性分别是：第一个--fn函数，第二个是数字1。所以method函数的第二行应该打印2，arguments对象有两个属性嘛！所以length=2。最后一行就是call和apply的显示调用，this指向obj所以打印5。

综上，这道题的答案是：10  2  5