前言
在以往的ECMAScript 5中,this的指向可谓是多种多样,在各个公司面试题也是必考项,现收集几个面试题进行解析:
原题解析
题1:
var o = {
fn: function(){
var a = 1;
console.log(this.a);
}
}
o.a = 2;
o.fn.a = 3;
o.fn();
*分析:
o.a = 2; // 赋值, 即给对象o添加一个a属性,值为2
o.fn.a = 3; // 赋值, fn函数添加属性 a 为 3
o.fn(); // 对象调用,this是函数对象o里面
答案:2
题2:
var o = {
function fun(){
var a = 1;
this.a = 2;
function fn(){
return this.a;
}
fn.a = 3;
return fn;
}
var result = fun()();
console.log(result)
*分析:
var a = 1; // 全局变量
this.a = 2; // 全局添加属性
var result = fun()(); // 函数直接调用,this window对象
答案:2
题3:
var a = 1;
var obj = {
a: 2,
fn: (function(){
this.a = 3;
return function(){
return this.a;
}
})()
}
var fn = obj.fn;
var result1 = obj.fn();
var result2 = fn();
console.log('result1: ', result1);
console.log('result2: ', result2);
*分析:
补充知识点:
// 自运行函数是先执行的;比如
var o ={
a: 1+1 // 先执行 1 + 1;
}
this.a = 3; // 全局变量
var result1 = obj.fn(); // obj对象调用,指向对象内部 a值
var result2 = fn(); // global调用a, 值为3
答案:2, 3
题4:
var arr = [fn1,fn2];
function fn1(){
return this.length;
}
function fn2(){
return this[0];
}
var a = arr[0]();
var b = arr[1]()();
console.log('a: ', a);
console.log('b: ', b);
*分析:
// 枚举
return this.length; // this是数组
var b = arr[1]()(); // global调用
// 在浏览器中与在弄的环境中运行结果都不一样
// node:
// a: 2;
// b: undefined;
答案:2, undefined;
题5:
function f(){
console.log(this.a)
};
f.a = 100;
怎么使函数中打印100?
*分析:
// 方法一 call 方法
f.call(f);
// 方法二 arguments.callee
原函数更改为:
function f(){
console.log(arguments.callee.a)
}
f.a = 100;
f();
答案:f.call(f), console.log(arguments.callee.a);