解析this关键字
解析this关键字
this关键字是JavaScript中最复杂的机制之一，是一个特别的关键字，被自动定义在全部函数的做用域中，可是不少JavaScript开发者并非很是清楚它究竟指向的是什么。node
请先回答第一个问题，如何准确地判断this指向的是什么？面试
再看一道题。控制台打印出来是什么？【浏览器运行环境】浏览器
var number = 5
var obj = {
number: 3,
fn1: (function () {
var number;
this.number *= 2;
number = number * 2;
number = 3;
return function() {
var num = this.number;
this.number *= 2;
console.log(num);
number *= 3;
console.log(number)
}
})()
}
为何要学习this
- this使用频率很高
- 工做中，滥用this
- 合理的使用this
- 面试高频问题
this是什么
<br> this不是指向自身！this就是一个指针，指向调用函数的对象。 闭包
<br><br> 为了可以一眼看出this指向的是什么，首先须要知道this的绑定规则有哪些：app
- 默认绑定
- 隐式绑定
- 硬绑定
- new 绑定
默认绑定
默认绑定，再不能应用其余绑定规则时使用的默认规则，一般是独立函数调用。函数
function sayHi () {
console.log('Hello,',this.name);
}
var name = 'make'
sayHi();
在调用sayHi()时，应用了默认绑定，this指向全局对象(非严格模式下)，严格模式下，this指向undefined，undefined上没有this对象，会抛出错误。学习
上面的代码，若是在浏览器环境中运行，那么结果就是Hello,makethis
可是若是在node环境中运行，结果就是Hello,undefined.这是由于node中name并非挂在全局对象上的。指针
隐式绑定
函数的调用是在某个对象上触发的，即调用位置上存在上下文对象。典型的形式为XXX.fun().先看代码：rest
function sayHi () {
console.log('Hello,',this.name);
}
var person = {
name: 'make',
sayHi: sayHi
}
var name = 'kang';
person.sayHi();
打印的结果是Hello,make
sayHi函数声明在外部，严格来讲并不属于person，可是在调用sayHi时，调用位置会使person的上下文来引用函数，隐式绑定会把函数调用中的this（即此例sayHi函数中的this）绑定到这个上下文对象（即此例中的person）。
须要注意的是： 对象属性链中只有最后一层会影响到调用位置。
function sayHi () {
console.log('Hello,',this.name);
}
var person2 = {
name: 'name2',
sayHi: sayHi
}
var person1 = {
name: 'name1',
friend: person2
}
person1.friend.sayHi();
结果是：Hello,name2。
由于只有最后一层会肯定this指向的是什么，无论有多少层，在判断this的时候，只关注最后一层，即此处的friend。
隐式绑定有一个大陷阱，绑定很容易丢失(或者说容易给人形成误导，觉得this指向的是什么，可是实际上并不是如此)。
function sayHi () {
console.log('Hello,',this.name);
}
var person = {
name: 'name1',
sayHi: sayHi
}
var name = 'name2';
var Hi = person.sayHi;
Hi();
结果是：Hello,name2
这是为何呢，Hi直接指向了sayHi的引用，在调用的时候，跟person没有半毛钱的关系，针对此类问题，建议你们紧紧记住这个格式：XXX.fn(); fn()前若是什么都没有，那么确定不是隐式绑定，可是也不必定就是默认绑定！！！
除了上面的这种丢失以外，隐式绑定的丢失是发生在回调函数中(事件回调也是其中一种)，看下面的例子：
function sayHi () {
console.log('Hello,',this.name);
}
var person1 = {
name: 'name1',
sayHi: function () {
setimeout(function(){
console.log('Hello,',this.name);
}
}
}
var person2 = {
name: 'name2',
sayHi:sayHi
}
var name = 'name3';
person1.sayHi();
setTimeout(person2.sayHi,100);
setTimeout(function(){
person2.sayHi();
},200)
结果为：
Hello,name3 Hello.name3 Hello,name2
- 第一条输出：setTimeout的回调函数中，this使用的是默认绑定，非严格模式下，执行的是全局对象。
- 第二条输出：setTimeout(fn.delay){ fn(); },至关因而将person2.sayHi赋值给了一个变量，最后执行了变量，这个时候，sayHi中的this显然和person2就没有关系了
- 第三条输出：虽然也是在setTimeout回调中，可是能够看出，这是执行的person2.sayHi()，使用的是隐式绑定，所以此次this指向的是person2，跟当前做用域没有关系。
显式绑定
显示绑定就是经过call,apple,bind的方式，显式的指定this所指向的对象(注意：《你不知道的JavaScript》中将bind单独做为了硬绑定讲解了)。
call,apple和bind的第一个参数，就是对应函数的this所指向的对象。call和apply的做用同样，只是传参方式不一样。call和apply都会执行对应的函数，而bind方法不会。
function sayHi () {
console.log('Hello',this.name);
}
var person = {
name: 'name1',
sayHi: sayHi
}
var name = 'name'
var Hi = person.sayHi;
Hi.call(person); // Hi.apply(person)
输出结果为：Hello,name1.由于使用硬绑定明确将this绑定在了person上。
那么，使用了硬绑定，是否是意味着不会出现隐式绑定所遇到的绑定丢失呢？答案是：并非！！！
function sayHi () {
console.log('Hello',this.name);
}
var person = {
name: 'name1',
sayHi: sayHi
}
var name = 'name';
var Hi = function(fn){
fn();
}
Hi.call(person,person.sayHi);
输出的结果是Hello,name.缘由很简单，Hi.call(person,person.sayHi)的确是将this绑定到Hi中的this了。可是在执行fn的时候，至关于直接调用了sayHi方法(记住：person.sayHi已经被赋值给fn了，隐式绑定也丢了)，没有指定this的值，对应的是默认绑定。
若是但愿绑定不会丢失，要怎么作？很简单，调用fn的时候，也给他硬绑定。
function sayHi() {
console.log('Hello,',this.name);
}
var person = {
name = 'name1',
sayHi: sayHi
}
var name = 'name';
var Hi = function(fn) {
fn.call(this);
}
Hi.call(person,person.sayHi);
此时，输出的结果为：Hello,name1,由于person被绑定到Hi函数中的this上，fn又将这个对象绑定给了sayHi的函数，这时，sayHi中的this指向的就是person对象。
new绑定
JavaScript和C++不同，并无类，在JavaScript中，构造函数只是使用new操做符时被调用的函数，这些函数和普通的函数并无什么不一样，他不属于某个类，也不可能实例化出一个类。任何一个函数均可以使用new来调用，所以其实并不存在构造函数，而只有对于函数的“构造调用”。
使用 new 来调用函数，会自动执行下面的操做：
- 建立一个新对象；
- 将构造函数的做用域赋值给新对象，即this指向的这个新对象；
- 执行构造函数中的代码；
- 返回新对象。
所以，咱们使用 new 来调用函数的时候，就会更新对象到这个函数的this上。
function sayHi(name) {
this.name = name;
}
var Hi = new sayHi('make');
console.log('Hello,',Hi.name);
输出结果为Hello,make,缘由是由于在var Hi = new sayHi('make');这一步，会将sayHi的this绑定到Hi对象上。
绑定优先级
this有四种绑定规则，可是若是同时应用了多种规则，怎么办？
显然，须要了解那一种绑定方式的优先级更高吗，这四种绑定的优先级为：
new 绑定 > 显示绑定 > 隐式绑定 > 默认绑定
绑定例外
凡事都有例外，this的规则也是这样。
若是咱们将null或者是undefined做为this的绑定对象传入call/apply或者是bind，这些值在调用时会被忽略，实际应用的是默认绑定规则。
function sayHi() {
console.log('Hello,',this.name);
}
var person = {
name: 'name',
sayhi: sayHi
}
var name1 = 'name1';
var Hi = function(fn) {
fn();
}
Hi.call(null,parson.sayHi);
输出的结果是Hello,name1,由于这时实际应用的是默认绑定规则。
箭头函数
箭头函数是ES6中新增的，它和普通函数有一些区别，箭头函数没有本身的this，它的this继承与外层代码库中的this。箭头函数在使用时，须要注意如下几点：
- 函数体内的this对象，继承的是外层代码块的this。
- 不能够看成构造函数，也就是说，不可使用new命令，不然会抛出一个错误。
- 不可使用arguments对象，该对象在函数体内不存在。若是要用，能够用rest参数代替。
- 不可使用yield命令，所以箭头函数不能用做Generator函数。
- 箭头函数没有本身的this，因此不能用call()/apply()/bind()这些方法去改变this的指向。
OK，看一下箭头函数的this是什么：
var obj = {
hi: function() {
console.log(this);
return () => {
console.log(this);
}
},
sayHi: function() {
return function() {
console.log(this);
return () => {
console.log(this);
}
}
},
say: () => {
console.log(this);
}
}
let hi = obj.hi(); // 输出 obj 对象
hi(); // 输出 obj 对象
let sayHi = obj.sayHi();
let fun1 = sayHi(); // 输出 window
fun1(); // 输出 window
obj.say(); // 输出 window
若是说箭头函数中的this是定义时所在的对象，这样的结果显示不是你们预期的，按照这个定义，say中的this应该是obj才对。
分析上面的执行结果：
-
obj.hi();对应了this的默认绑定规则，this绑定在obj上，因此输出obj。
-
hi();这一步执行的就是箭头函数，箭头函数继承上一个代码库的this，刚刚咱们得出上一层的this是obj，显然这里的this就是obj。
-
执行sayHi();这一步，前面说过这种隐式绑定丢失的状况，这个时候this执行的是默认绑定，this指向的是全局对象window。
-
fun1();这一步执行的是箭头函数，若是按照以前的理解，this指向的是箭头函数定义时所在的对象，那么这儿显然是说不通。OK，按照箭头函数的this是继承与外层代码库的this就很好理解了。外层代码库刚刚分析了，this指向的是window，所以这儿的输出结果也是window。
-
obj.say();执行的是箭头函数，当前代码块obj中是不存在this的，只能往上找，就找到了全局的this，指向的是window。
箭头函数的this是静态的？
依旧是前面的代码，来看看箭头函数中的this真的是静态吗？ 非也！！！
var obj = {
hi: function() {
console.log(this);
return () => {
console.log(this);
}
},
sayHi: function() {
return function() {
console.log(this);
return () => {
console.log(this);
}
}
},
say: function() {
console.log(this);
}
}
let sayHi = obj.sayHi();
let fun1 = sayHi(); // 输出 window
fun1(); // 输出 window
let fun2 = sayHi.bind(obj)(); // 输出 obj
fun2(); // 输出 obj
能够看出，fun1和fun2对应的是一样的箭头函数，可是this的输出结果是不同的。
因此，请牢记注一点：箭头函数没有本身的this，箭头函数中的this继承与外层代码库中的this
总结
1.如何准确判断this的指向是什么？
-
函数是否在 new 中调用(new绑定)，若是是，那么this绑定的是新建立的对象。
-
函数是否经过call,apply调用，或者使用了bind(硬绑定)，若是是，那么this绑定的就是指定的对象。
-
函数是否在某个上下文对象中调用(隐式模式)，若是是的话，this绑定的是那个上下文对象。通常是obj.foo()。
-
若是以上都不是，那么使用默认绑定。若是在严格模式下，则绑定到undefined，不然会绑定到全局对象。
-
若是把Null或者undefined做为this的绑定对象传入call、apply或者bind，这些值在调用时会被忽略，实际应用的是默认绑定规则。
-
若是是箭头函数，箭头函数的this继承的是外层代码块的this。
2. 执行过程解析
var number = 5;
var obj = {
number: 3;
fn: (function() {
var number;
this.number *= 2;
number = number * 2;
number = 3;
return function() {
var num = this.number;
this.number *= 2;
console.log(num);
number *= 3;
console.log(number);
}
})()
}
var myFun = obj.fn;
myFun.call(null);
obj.fn();
console.log(window.number);
咱们来分析一下，这段代码的执行过程：
- 在定义obj的时候，fn对应的闭包就执行了，返回其中的函数，执行闭包中的代码时，显然应用不了new绑定(没有出现new关键字)，硬绑定也没有(没有出现call,apply,bind关键字)，隐式绑定有没有？很显然没有。若是没有XXX.fun(),那么确定没有应用隐式绑定，因此这里应用的就是默认绑定了，非严格模式下this绑定到了window上(浏览器执行环境)。【这里很容易被迷惑的就是觉得this指向的是obj，必定要注意，除非是箭头函数，不然this跟词法做用域是两回事，必定要牢记在心】
window.number *= 2; //window.nuumber 的值是 10(var number 定义的全局变量是挂在window上的) number = number * 2; // number的值是NaN； 注意这边定义了一个number,可是没有赋值，number的值是undefined;Number(undefined) -> NaN number = 3; // number 的值为3
- myFun.call(null);前面说了，call的第一个参数传null，调用的是默认绑定；
fn: function() {
var num = this.number;
this.number *= 2;
console.log(num);
number *= 3;
console.log(number);
}
执行时：
var num = this.number; // num=10;此时this指向的是window this.number *= 2; // window.number = 20 console.log(num); // 输出结果为 10 number *= 3; // number=9;这个number对应闭包中的number;闭包中number的值是3 console.log(number); // 输出结果是 9
- obj.fn();应用了隐式绑定，fn中的this对应的是obj。
var num = this.number; //num = 3;此时this指向的是obj thia.number *= 2; // obj.number = 6; console.log(num); // 输出结果为 3； number *= 3; // number=27;这个number对应的闭包中的number；比保重的number的值此时是 9 console.log(number); // 输出结果是 27
- 最后一步console.log(window.number); 输出结果是 20；
所以，组中结果为：
10 9 3 27 20
- 1. java中this关键字解析
- 2. this关键字
- 3. 关键字this
- 4. This关键字
- 5. this关键字详解
- 6. 理解关键字static、this
- 7. 理解JavaScripte this关键字
- 8. private关键字与this关键字
- 9. java----super关键字和this关键字
- 10. this关键字static关键字
- 更多相关文章...
- • SQLite Distinct 关键字 - SQLite教程
- • SQL ORDER BY 关键字 - SQL 教程
- • NewSQL-TiDB相关
- • 为了进字节跳动，我精选了29道Java经典算法题，带详细讲解
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. java中this关键字解析
- 2. this关键字
- 3. 关键字this
- 4. This关键字
- 5. this关键字详解
- 6. 理解关键字static、this
- 7. 理解JavaScripte this关键字
- 8. private关键字与this关键字
- 9. java----super关键字和this关键字
- 10. this关键字static关键字