前言
this 关键字在 Javascript 中非常常见,但是很多开发者很难说清它到底指向什么。大部分人会从字面意思上去理解 this,认为 this 指向函数自身,实际上this 是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数调
用时的各种条件。this 的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。
总结: 函数被调用时发生 this 绑定，this 指向什么完全取决于函数在哪里被调用。
一、this 的绑定规则
this 一共有 4 中绑定规则，接下来一一介绍每种规则的解释和规则直接的优先级
- 默认绑定（严格/非严格模式）
- 隐式绑定
- 显式绑定
- new 绑定
1.1 默认绑定（严格/非严格模式）
- 独立函数调用： 独立函数调用时 this 使用默认绑定规则，默认绑定规则下 this 指向 window（全局对象）。
- 严格模式下： this 无法使用默认绑定，this 会绑定到 undefined。
独立函数调用
function foo() {
console.log(this.a);
}
var a = 2;
foo(); // 2
严格模式下：
function foo() {
"use strict";
console.log(this); //undefined
console.log(this.a); //Uncaught TypeError: Cannot read property 'a' of undefined
}
var a = 2;
foo();
注意下边两种情况
var age = "18";
var obj = {
name: "heyushuo",
age: 25,
fn: function() {
function sayName() {
console.log(this); //window
console.log(this.age); //undefined
}
sayName();
}
};
obj.fn();
函数 sayName 虽然是在 obj.fn 内部定义的，但是它仍然是一个独立函数调用，this 仍然指向 window。
var a = "global";
var obj = {
a: 2,
foo: function() {
console.log(this.a); //global
}
};
var bar = obj.foo; // 函数别名！
bar();
虽然 bar 是 obj.foo 的一个引用，但是实际上，它引用的是函数本身，因此此时的
bar() 其实是一个不带任何修饰的独立函数调用，因此应用了默认绑定。
1.2 隐式绑定
当函数引用有上下文对象时(例如:obj.foo 这个时候使用 obj 上下文来引用函数 foo)，隐式绑定规则会把函数中的 this 绑定到这个上下文对象。
var obj = {
name: "heyushuo,
foo: function() {
console.log(this.name); //heyushuo
}
};
obj.foo();
对象属性引用链中只有上一层或者说最后一层在调用中起作用。
var obj = {
name: "heyushuo",
obj1: {
name: "kebi",
foo: function() {
console.log(this.name); // kebi
}
}
};
obj.obj1.foo();
隐式丢失
被隐式绑定的函数会丢失绑定对象，而应用默认绑定，把 this 绑定到全局对象或者 undefined(严格模式) 上。
第一种
var a = "global";
var obj = {
a: 2,
foo: function() {
console.log(this.a); //global
}
};
var bar = obj.foo; // 函数别名！
bar();
虽然 bar 是 obj.foo 的一个引用，但是实际上，它引用的是函数本身，因此此时的bar() 其实是一个不带任何修饰的独立函数调用，因此应用了默认绑定。
第二种传入回调函数时：
var a = "global";
var obj = {
a: 2,
foo: function() {
console.log(this.a); //global
}
};
var bar = obj.foo; // 函数别名！
function doFoo(fn) {
fn(); // <-- 调用位置！
}
doFoo(bar); //global
//和下边这种一样
setTimeout(obj.foo, 300);
1.3 显示绑定
通过 call() 或者 apply()方法。第一个参数是一个对象，在调用函数时将这个对象绑定到 this 上，称之为显示绑定。
function foo() {
console.log(this.a);
}
var obj = {
a: 2
};
foo.call(obj); // 2
显示绑定引申出来一个硬绑定,代码如下
function foo(something) {
console.log( this.a, something );
return this.a + something;
}
// 简单的辅助绑定函数
function bind(fn, obj) {
return function() {
return fn.apply( obj, arguments ); //内部已经强制绑定了传入函数this的指向
};
}
var obj = {
a:2
};
var bar = bind( foo, obj );
var b = bar( 3 ); // 2 3
console.log( b ); // 5
bar函数无论如何调用,它总会手动在 obj 上调用 fn,强制把 fn 的 this 绑定到了 obj。这样也解决前面提到的丢失绑定问题
由于硬绑定是一种非常常用的模式，所以在 ES5 中提供了内置的方法 Function.prototype.bind
function foo(something) {
console.log( this.a, something );
return this.a + something;
}
var obj = {
a:2
};
var bar = foo.bind( obj );
var b = bar( 3 ); // 2 3
console.log( b ); // 5
1.4 new绑定
使用new来调用函数，或者说发生构造函数调用时，会自动执行下面的操作。
- 创建（或者说构造）一个全新的对象。
- 这个新对象会被执行 [[ 原型 ]] 连接。
- 这个新对象会绑定到函数调用的 this。
- 如果函数没有返回其他对象，那么 new 表达式中的函数调用会自动返回这个新对象。
例如:
function foo() {
this.name = "heyushuo";
this.age = 25
}
foo.prototype.sayName = function(){
console.log(this.name+this.age);
}
var bar = new foo();
console.log(bar); //{name: "heyushuo", age: 25}
//这个新对象会绑定到函数调用的 this。所以此时的this就是bar对象
console.log( bar.age ); // 25
如下图是 new foo() 这个对象
二、四种绑定关系的优先级
判断this,可以按照下面的顺序来进行判断：
1、函数是否在 new 中调用（new 绑定）？如果是的话 this 绑定的是新创建的对象。
var bar = new foo()
2、函数是否通过 call、apply（显式绑定）或者硬绑定调用？如果是的话，this 绑定的是指定的对象。
var bar = foo.call(obj2)
3、函数是否在某个上下文对象中调用（隐式绑定）？如果是的话，this 绑定的是那个上下文对象。
var bar = obj1.foo()
4、如果都不是的话，使用默认绑定。如果在严格模式下，就绑定到 undefined，否则绑定到全局对象。
var bar = foo()
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。