Javascript中的 this 问题

前导知识 原文 | 备份:

• Javascript中的 this 具体是指代谁，要看 当前运行环境( 定义this栈帧的上层栈帧，有待验证 )
• 不能只看定义部分；不能只看定义部分；不能只看定义部分

查看有关资料后，具体可能分以下几种情况：

调用方式	示例	this指向
通过new调用	new method()	新对象
直接调用	method()	全局对象
通过对象调用	obj.method()	obj
call、apply、bind	method.call(ctx)	第一个参数

具体代码示例如下：

前导知识： new 关键字的执行过程 | 看这个也行

• 创建空对象{}
• 空对象{} 的 __proto__ -> 构造函数.prototype
• 调用 构造函数.call() 将 this ->window 改为 this -> 空对象{}，并进行实参赋值
• 执行构造函数函数体的内容
• 返回空对象{} （或者函数体内的return语句）

/**
 * 第一种：new关键字
 */
function test(params) {
    console.log(this);
}
new test();     //  this -> 新对象(new生成的这个实例)

/**
 * 第二种：全局下调用
 *  */
function test(params) {
    console.log(this);
}
test();     // this -> window[Browser] or global[Node]
            // 这种等同于 window.test()
console.log(this);     // this -> window[Browser] or global[Node]

/**
 * 第三种：对象调用
 *  */
function test(params) {
    console.log(this);
}
var obj = { fn: test }；

obj.test(); // this -> obj

/**
 * 第四种：特殊方法调用 call/apply/bind
 *
 * - 相同：三者都可以改变this到第一个参数
 * - 不同：
 *      1.执行时间
 *          bind返回的是一个方法，需要主动加()调用
 *          call、apply会自动执行
 *      2.接受参数
 *          call、bind的剩余参数以','分割
 *          apply的剩余参数放入一个数组
 *
 *  */
var test = {
    name: '张三',
    age: 17,
    toStr: function (from, to) {
        console.log(this.name + ' 年龄：' + this.age + "，来自 " + from + " 去往 " + to);
    }
}
var obj = {name: '李四', age: 20};

test.toStr.call(obj, '成都', '上海');   // 李四 年龄：20，来自 成都 去往 上海
test.toStr.apply(obj, ['成都', '上海']);    // 李四 年龄：20，来自 成都 去往 上海
test.toStr.bind(obj, '成都', '上海')();     // 李四 年龄：20，来自 成都 去往 上海
test.toStr.bind(obj, ['成都', '上海'])();   // 李四 年龄：20，来自 成都,上海 去往 undefined