this绑定规则

zgbgx 发布于2019-08-21 16:42 / 2405人阅读

摘要：默认绑定最常用的函数调用类型独立函数调用，这条规则可以看作无法应用其他规则时的默认规则非严格模式下如果是严格模式下会输出在调用时没有任何的修饰函数，因此只能使用默认绑定，指向全局变量作用域，被解析成全局变量隐式绑定示例代码如上例所示，在对象

默认绑定

最常用的函数调用类型：独立函数调用，这条规则可以看作无法应用其他规则时的默认规则

function one() {
  console.log(this.a)
}

var a = 1
one() //1 非严格模式下 如果是严格模式下会输出undefined

one在调用时没有任何的修饰函数，因此只能使用默认绑定，this指向全局变量作用域，this.a被解析成全局变量a

隐式绑定

示例代码：

function one() {
  console.log(this.a)
}

var obj = {
  a : 1,
  one : one
}

obj.one() //1

如上例所示，在对象被调用时，调用位置存在上下文对象，one被当作引用属性添加到obj中，当one被调用时，加上了对obj的引用，即此时函数引用有上下文对象，隐式绑定规则会把函数调用中的this绑定到这个上下文对象上，因此此时的this.a等同于obj.a
Tips:对象属性引用链中只有上一层或者说最里面一层在调用位置中起作用，例子：

function one() {
  console.log(this.a)
}

var obj = {
  a : 1,
  one : one
}

var obj1 = {
  obj : obj,
  a : 2
}

obj1.obj.one() //1

隐式丢失

隐式绑定最常见的问题就是被隐式绑定的函数会丢失绑定的对象，即它会使用默认绑定，将this绑定到全局对象上

function one() {
  console.log(this.a)
}

var obj = {
  a : 1,
  one : one
}

var another = obj.one
var a = 2
another() //2

虽然another是obj.one的一个引用，但是实际上，它引用的是one函数本身，因此此时another()是一个不带任何修饰的函数调用，会应用默认绑定

显示绑定

显示绑定常见的绑定形式就是使用函数call()和apply()修改this的指向，它们的第一个参数就是一个对象，是给this准备的，即在后面时this的指向域，示例代码：

function one() {
  console.log(this.a)
}

var obj = {
  a : 1,
}

one.call(obj) //1

硬绑定

有时显示绑定不一定能解决我们碰到的问题，比如我们需要将this强制绑定到一个对象上，之后无论怎么调用都无法修改this指向，示例代码：

function one() {
  console.log(this.a)
}

var obj = {
  a : 1,
}

var a = 2
var another = function () {
  one.call(obj)
}
another() //1
another.call(window) //1

硬绑定将one的this强制绑定在了obj上，无论之后如何调用函数another()，它总会手动在obj上调用one

bind方法绑定

示例代码：

function one() {
  console.log(this.a)
}

var obj = {
  a : 1,
}

var another = one.bind(obj)
another() //1

bind()会返回一个硬编码的新函数，它会把你指定的参数设置为this的上下文并调用原始函数

new绑定

使用new来调用函数时需要注意的点
Tips:

创建(或者说构造)一个全新的对象

这个对象会绑定到函数调用的this

如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象

示例代码：

function one(a) {
  this.a = a
}
var another = new one(1)
console.log(another.a)

使用new来调用one()时，会构造一个新对象并把它绑定到one()调用中的this上

判断this绑定规则

函数是否在new中调用（new绑定）？如果是的话this绑定的是新创建的对象

函数是否通过call、apply（显示绑定）或者硬绑定调用？如果是的话，this绑定是指定的对象

函数是否在某个上下文对象中调用（隐式绑定）？如果是的话，this绑定的是那个上下文对象

如果都不是，使用默认绑定，如果在严格模式下就绑定到undefined，否则绑定到全局对象

以上绑定规则优先级由高到低，感兴趣的可以自己去动手验证一下

以上内容是个人的一点总结，如果有错误或不严谨的地方，欢迎批评指正，如果喜欢，欢迎点赞收藏

超融合服务器专线服务 this[] this _this this变量

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

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

JavaScript中this绑定详解

摘要：绑定最后要讲的一种绑定规则，是指通过操作符调用构造函数时发生的绑定。因此，所谓的绑定是指通过操作符来调用函数时，会产生一个新对象，并且会把构造函数内的绑定到这个对象上。事实上，在中，使用来调用函数，会自动执行下面的操作。转载请注明出处 https://segmentfault.com/a/11... this 可以说是 javascript 中最耐人寻味的一个特性，就像高中英语里各种...

yacheng 2019-08-20 11:33 评论0 收藏0
你不知道的js中关于this绑定机制的解析[看完还不懂算我输]

摘要：绑定书中提到在中，实际上并不存在所谓的构造函数，只有对于函数的构造调用。规则使用构造调用的时候，会自动绑定在期间创建的对象上。指向新创建的对象绑定比隐式绑定优先级高。 showImg(http://ww1.sinaimg.cn/large/005Y4rCogy1fstcwvzkjzj30sg0g0qqn.jpg); 前言最近正在看《你不知道的JavaScript》，里面关于this绑...

dunizb 2019-08-22 18:27 评论0 收藏0
关于 this 你想知道的一切都在这里

摘要：如下在第一个例子中，被点击元素是通过，这个形式参数来代替的。它的作用和形式参数类似，其本质上是一个对象的引用，它的特殊性在于不需要手动传值，所以使用起来会更加简单和方便。无论在 javascript 的日常使用中还是前端面试过程中，this 的出镜率都极高。这无疑说明了，this 的重要性。但是 this 非常灵活，导致很多人觉得 this 的行为难以理解。本文从为什么要有 this...

Lemon_95 2019-08-20 13:49 评论0 收藏0
JS中的this详解

摘要：实际上并不存在什么构造函数，只存在对于函数的构造调用发生构造函数的调用时，会自动执行下边的操作创建一个全新的对象。说明绑定的优先级高于硬绑定。原文阅读 js中的this是很容易让人觉得困惑的地方，这篇文章打算说一下this绑定的几种情况，相信可以解决大部分关于this的疑惑。 this是在运行的时候绑定的，不是在编写的时候绑定的，函数调用的方式不同，就可能使this所绑定的对象不...

Mike617 2019-08-21 16:01 评论0 收藏0
彻底搞懂 JS 中 this 机制

摘要：的四种绑定规则的种绑定规则分别是默认绑定隐式绑定显示绑定绑定。绑定中的操作符，和其他语言中如的机制是不一样的。规则例外在显示绑定中，对于和的绑定将不会生效。它也是作为机制的一种替换，解决之前绑定过程各种规则带来的复杂性。彻底搞懂 JS 中 this 机制摘要：本文属于原创，欢迎转载，转载请保留出处：https://github.com/jasonGeng88/blog 目录 t...

李世赞 2019-08-22 16:05 评论0 收藏0