再也不用被this苦恼了
2019-08-05

前端编程对于this再熟悉不过了,今日来个老调重弹温故知新,肯定有很多大佬已经完全吃透了this原理,敬请出门左拐。对于理解this似懂非懂的同学可以借鉴一波

1.this描述

this指的是当前执行环境上下文,只要牢牢抓住这一点就能找到this的根源,this.function、this.property就能准确定位实际对象。

2.this绑定规则

window 绑定

function sayAge () { console.log(this.age);}var user = { name: "ccy", age: 18}sayAge()

  输出结果为undefined,仔细思考当前函数执行的上下文,其实等价于window.sayAge()

  this默认绑定在window全局对象上

隐式绑定

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

  这段代码this绑定到了obj对象,当函数引用有上下文对象(context)时,隐式绑定规则会把this绑定到这个上下文对象

  再看看隐式丢失问题

var bar=obj.foo;bar();

  输出undefined,因为此时执行上下文为全局对象,没有a属性

显式绑定

  在分析隐式绑定时,必须将函数作为对象的属性,从而将此对象绑定在函数的执行上下文,但想想是不是很麻烦,显示绑定可解决此问题。

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

  用函数原型属性 call、apply、bind都可以实现

Function.prototype.call=function(ctx,arg1,arg2,/*...*/argN){native code}Function.prototype.apply=function(ctx,arrys){native code}Function.prototype.bind=function(ctx){native code}

  当然这些函数原型属性都可以重写以实现自己的需求,call和apply的区别仅仅在于第二个参数开始apply传递数组,call是将参数一个个传递,call与bind的区别在于bind不能立即执行。

new 绑定

  其实每当用 new 调用函数时,JavaScript 解释器都会在底层创建一个全新的对象并把这个对象当做 this。如果用 new 调用一个函数,this 会自然地引用解释器创建的新对象。

function User (name, age) { /* JavaScript 会在底层创建一个新对象 `this`,它会代理不在 User 原型链上的属性。 如果一个函数用 new 关键字调用,this 就会指向解释器创建的新对象。 */ this.name = name this.age = age } var me = new User("ccy", 18)

如果要判断一个运行中函数的this绑定,就需要找到这个函数的直接调用位置。找到之后就可以顺序应用下面这四条规则来判断this的绑定对象。

参考资料

https://juejin.im/post/5b9f176b6fb9a05d3827d03f

https://www.cnblogs.com/buzhiqianduan/p/7718313.html