JavaScript基础心法——this

hover_lew 发布于2019-08-22 11:11 / 757人阅读

摘要：原文地址基础心法欢迎。作为一个构造函数被绑定到正在构造的新对象。通过构造函数创建一个对象其实执行这样几个步骤创建新对象将指向这个对象给对象赋值属性方法返回所以就是指向创建的这个对象上。

原文地址：JavaScript基础心法——this

欢迎star。

如果有错误的地方欢迎指正。

看看这个有着深不可测的魔力的this到底是个什么玩意儿 ~

什么是this

在传统面向对象的语言中，比如Java，this关键字用来表示当前对象本身，或当前对象的一个实例，通过this关键字可以获得当前对象的属性和调用方法。

在JavaScript中，this似乎表现地略有不同，这也是让人“讨厌”的地方~

ECMAScript规范中这样写：

this 关键字执行为当前执行环境的 ThisBinding。

MDN上这样写：

In most cases, the value of this is determined by how a function is called.
在绝大多数情况下，函数的调用方式决定了this的值。

可以这样理解，在JavaScript中，this的指向是调用时决定的，而不是创建时决定的，这就会导致this的指向会让人迷惑，简单来说，this具有运行期绑定的特性。

参考资料：this - JavaScript | MDN

来看看不同的情况五花八门的this吧~

调用位置

首先需要理解调用位置，调用位置就是函数在代码中被调用的位置，而不是声明的位置。

通过分析调用栈（到达当前执行位置所调用的所有函数）可以找到调用位置。

function baz(){
  console.log("baz");
  bar();
}
function bar(){
  console.log("bar");
  foo();
}
function foo(){
  console.log("foo");
}
baz();

当我们调用baz()时，它会以此调用baz()→bar()→foo()。

对于foo()：调用位置是在bar()中。
对于bar()：调用位置是在baz()中。
而对于baz()：调用位置是全局作用域中。

可以看出，调用位置应该是当前正在执行的函数的前一个调用中。

全局上下文

在全局执行上下文中this都指代全局对象。

this等价于window对象

var === this. === winodw.

console.log(window === this); // true
var a = 1;
this.b = 2;
window.c = 3;
console.log(a + b + c); // 6

在浏览器里面this等价于window对象，如果你声明一些全局变量，这些变量都会作为this的属性。

函数上下文

在函数内部，this的值取决于函数被调用的方式。

直接调用

this指向全局变量。

function foo(){
  return this;
}
console.log(foo() === window); // true

call()、apply()

this指向绑定的对象上。

var person = {
  name: "axuebin",
  age: 25
};
function say(job){
  console.log(this.name+":"+this.age+" "+job);
}
say.call(person,"FE"); // axuebin:25
say.apply(person,["FE"]); // axuebin:25

可以看到，定义了一个say函数是用来输出name、age和job，其中本身没有name和age属性，我们将这个函数绑定到person这个对象上，输出了本属于person的属性，说明此时this是指向对象person的。

如果传入一个原始值（字符串、布尔或数字类型）来当做this的绑定对象，这个原始值会被转换成它的对象形式（new String()），这通常被称为“装箱”。

call和apply从this的绑定角度上来说是一样的，唯一不同的是它们的第二个参数。

bind()

this将永久地被绑定到了bind的第一个参数。

bind和call、apply有些相似。

var person = {
  name: "axuebin",
  age: 25
};
function say(){
  console.log(this.name+":"+this.age);
}
var f = say.bind(person);
console.log(f());

箭头函数

所有的箭头函数都没有自己的this，都指向外层。

关于箭头函数的争论一直都在，可以看看下面的几个链接：

ES6 箭头函数中的 this？你可能想多了（翻译）

关于箭头函数this的理解几乎完全是错误的 #150

MDN中对于箭头函数这一部分是这样描述的：

An arrow function does not create its own this, the this value of the enclosing execution context is used.
箭头函数会捕获其所在上下文的this值，作为自己的this值。

function Person(name){
  this.name = name;
  this.say = () => {
    var name = "xb";
    return this.name;
  }
}
var person = new Person("axuebin");
console.log(person.say()); // axuebin

箭头函数常用语回调函数中，例如定时器中：

function foo() {  
  setTimeout(()=>{
    console.log(this.a);
  },100)
}
var obj = {
  a: 2
}
foo.call(obj);

附上MDN关于箭头函数this的解释：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions#不绑定_this

作为对象的一个方法

this指向调用函数的对象。

var person = {
  name: "axuebin",
  getName: function(){
    return this.name;
  }
}
console.log(person.getName()); // axuebin

这里有一个需要注意的地方。。。

var name = "xb";
var person = {
  name: "axuebin",
  getName: function(){
    return this.name;
  }
}
var getName = person.getName;
console.log(getName()); // xb

发现this又指向全局变量了，这是为什么呢？

还是那句话，this的指向得看函数调用时。

作为一个构造函数

this被绑定到正在构造的新对象。

通过构造函数创建一个对象其实执行这样几个步骤：

创建新对象

将this指向这个对象

给对象赋值（属性、方法）

返回this

所以this就是指向创建的这个对象上。

function Person(name){
  this.name = name;
  this.age = 25;
  this.say = function(){
    console.log(this.name + ":" + this.age);
  }
}
var person = new Person("axuebin");
console.log(person.name); // axuebin
person.say(); // axuebin:25

作为一个DOM事件处理函数

this指向触发事件的元素，也就是始事件处理程序所绑定到的DOM节点。

var ele = document.getElementById("id");
ele.addEventListener("click",function(e){
  console.log(this);
  console.log(this === e.target); // true
})

HTML标签内联事件处理函数

this指向所在的DOM元素

jQuery的this

在许多情况下JQuery的this都指向DOM元素节点。

$(".btn").on("click",function(){
  console.log(this); 
});

总结

如果要判断一个函数的this绑定，就需要找到这个函数的直接调用位置。然后可以顺序按照下面四条规则来判断this的绑定对象：

由new调用：绑定到新创建的对象

由call或apply、bind调用：绑定到指定的对象

由上下文对象调用：绑定到上下文对象

默认：全局对象

注意：箭头函数不使用上面的绑定规则，根据外层作用域来决定this，继承外层函数调用的this绑定。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91936.html

JavaScript基础心法——call apply bind

摘要：原文地址基础心法欢迎。也就是说，这三个方法可以改变函数体内部的指向。令为一个空列表。提供作为值并以作为参数列表，调用的内部方法，返回结果。在外面传入的值会修改并成为值。语法其中，就是指向，是指定的参数。原文地址：JavaScript基础心法——call apply bind 欢迎star。如果有错误的地方欢迎指正。整理call、apply、bind这三个方法的的知识点。之前...

techstay 2019-08-22 11:10 评论0 收藏0
JavaScript基础心法——深浅拷贝

摘要：原文地址基础心法深浅拷贝欢迎。上面的代码是最简单的利用赋值操作符实现了一个浅拷贝，可以很清楚的看到，随着和改变，和也随着发生了变化。展开运算符结论实现的是对象第一层的深拷贝。原文地址：JavaScript基础心法——深浅拷贝欢迎star。如果有错误的地方欢迎指正。浅拷贝和深拷贝都是对于JS中的引用类型而言的，浅拷贝就只是复制对象的引用，如果拷贝后的对象发生变化，原对象也会发生...

keithxiaoy 2019-08-21 17:22 评论0 收藏0
object in javascript

摘要：枚举对象属性列举的可枚举属性，包括自身和原型链上的只列举对象本身的可枚举属性创建对象的几种方式对象字面量通过构造函数以指定的对象作为原型来创建对象这样，的原型就是了如何判断对象是否是空对象对象属性的描述符属性的描述符分描述符和访问描述符，对枚举对象属性 for....in 列举obj的可枚举属性，包括自身和原型链上的 object.keys() 只列举对象本身的可枚举属性创建对象的...

geekzhou 2019-08-21 16:40 评论0 收藏0
细数 JavaScript 实用黑科技(二)

摘要：前言书接上文细数实用黑科技一本文介绍独孤九剑和两篇最高内功心法。可以将变量转换为布尔值。可以把任何类型的值转换为布尔值，并且只有当这个变量的值为的时候才会返回，其他情况都返回。同样的，函数体内部声明的函数，作用域绑定函数体内部。 showImg(https://segmentfault.com/img/remote/1460000016507838); 前言书接上文：细数 JavaS...

马忠志 2019-08-23 12:07 评论0 收藏0
软件测试江湖（二）神兵利器篇

摘要：软件测试江湖二神兵利器篇在上一篇文章中我们介绍了江湖上流传的各种软件测试的武功秘籍和心法，相信看过的小伙伴内力得到了很大的提升。功能测试篇功能测试，是软件测试里的入门级心法，自然也有与之相对应的兵器来发挥心法的最大功力。软件测试江湖（二）神兵利器篇在上一篇文章中我们介绍了江湖上流传的各种软件测试的武功秘籍和心法，相信看过的小伙伴内力得到了很大的提升。如果没有，一定是你看的姿势不对，...

_Suqin 2019-06-27 16:29 评论0 收藏0