Summary of this binding method in JavaScript

Recently, I was reviewing some basic knowledge of js and read the "JS You Don't Know" series again. This is always the top priority, so I decided to make a systematic summary of the relevant knowledge of this, which will also be convenient for myself in the future. review.

This’s four binding rules

1. Default binding

This is the most common type of function call: a standalone function call (that is, the function is called directly using a function reference without any modifications). Think of this rule as the default rule when no other rules can be applied.

The default bound this points to window in non-strict mode, and points to undefined in strict mode. For example, the following function foo points to window

in non-strict mode:

var a = 2;
function foo(){
    var a = 3;
    console.log(this.a);
}
foo(); //2

[Related course recommendations: JavaScript Video Tutorial

]

This in the foo() method here points to the window, so window.a = 2;

In strict mode, this. points to undefined, so accessing this.a will report an error:

var a = 2;
function foo(){
    "use strict";
    var a = 3;
    console.log(this.a);
}
foo(); //Uncaught TypeError: Cannot read property 'a' of undefined

2. Implicit binding

If there is a context object at the calling location, or is "owned" or "contained" by an object, implicit binding is used.

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

In the above example, foo is called through obj.foo()

. The calling location uses obj context to reference the function, so this in foo points to obj.

In addition, foo is added to obj as a reference, but whether it is defined directly in obj or defined first and then added as a reference attribute, strictly speaking, foo does not belong to obj, so the " "Have" and "include" are put in quotation marks for easier understanding.

Common implicit calling scenarios:

obj.fn();
arguments[i]();//其实就是将点的调用方式变为了[]调用
el.onClick(function(){console.log(this);//this指向el})

Implicit loss

Let’s look at a piece of code first:

function foo() {
    console.log( this.a );
}
var obj = {
    a: 2,
    foo: foo
};
var bar = obj.foo; // 函数别名！
var a = "global"; // a 是全局对象的属性
bar(); // "global"

The above code In fact, just look at the calling method: bar()

. This is actually a function call without any modification, so the default binding is applied.

There is another way to pass parameters that will also cause implicit loss. The principle is actually the same as the above example:

function foo() {
    console.log( this.a );
}
function doFoo(fn) {
    // fn 其实引用的是foo
    fn(); // <-- 调用位置！
}
var obj = {
    a: 2,
    foo: foo
};
var a = "global"; // a 是全局对象的属性
doFoo( obj.foo ); // "global"

Display binding

Use The call, apply and bind methods can specify the value of this of the binding function. This binding method is called display binding.

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

Through foo.call(obj), we can force foo to bind its this to obj when calling it

new binding

# The ##new operator can create a new object instance based on a "constructor". The instantiation process of new is as follows:

● Create (or construct) a brand new object.

● This new object will be connected by performing [[ prototype]].

● This new object will be bound to this of the function call.

● If the function does not return other objects, then the function call in the new expression will automatically return the new object.

After clarifying the instantiation process of new, think about the following code:

function foo(a) {
    this.a = a;
}
var bar = new foo(2);
console.log( bar.a ); // 2

After new foo(2), a new instance object bar is created, and then the new object bar is bound to foo this in the function, so after executing this.a = a, a is actually assigned to bar.a

Priority

Under normal circumstances, the binding of this will According to the above four binding rules, when they appear at the same time, in what order should the direction of this be judged? The following are the specific rules:

Is the function called in new (new binding)? If so, this is bound to the newly created object (var bar = new foo()).

Is the function called through call, apply (explicit binding) or hard binding? If so, this is bound to the specified object ( var bar = foo.call(obj2) ).

Is the function called in a context object (implicit binding)? If so, this is bound to that context object. (var bar = obj1.foo())

If neither, use the default binding. If in strict mode, it is bound to undefined, otherwise it is bound to the global object. (var bar = foo())

Binding exception

1. Use the explicit binding method of call, appy, bind, and pass in null parameters Or when undefined is used as the context, the function call will still use the default binding

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

Under what circumstances do you need to pass the context as null?

1. Use the bind function to implement currying

function foo(a,b) {
    console.log(a,b);
}
// 使用 bind(..) 进行柯里化
var bar = foo.bind( null, 2 );
bar( 3 ); // 2,3

2. Use apply(..) to expand an array and pass it into a function as a parameter

function foo(a,b) {
    console.log(a,b);
}
// 把数组展开成参数
foo.apply( null, [2, 3] ); // 2,3

In fact, the above two usage scenarios do not care about the value of the first parameter of call/app/bind, they just want to pass a placeholder value.

But always passing in null may cause some hard-to-track bugs. For example, when you have this in a function in a third-party library you are using, this will be incorrectly bound to the global object, causing some unpredictable consequences (modifying global variables)

var a = 1;//全局变量
const Utils = {
    a: 2,
    changeA: function(a){
        this.a = a;
    }
}
Utils.changeA(3);
Utils.a //3
a //1
Utils.changeA.call(null,4);
Utils.a //3
a //4,修改了全局变量a！

Safer approach:

var o = Object.create(null);
Utils.changeA.call(o,6);
a //1, 全局变量没有修改
o.a // 6 改的是变量o

2. Indirect reference

function foo() {
    console.log( this.a );
}
var a = 2;
var o = { a: 3, foo: foo };
var p = { a: 4 };
o.foo(); // 3
(p.foo = o.foo)(); // 2

赋值表达式p.foo = o.foo 的返回值是目标函数的引用，因此调用位置是foo() 而不是p.foo() 或者o.foo()。根据我们之前说过的，这里会应用默认绑定。

this词法（箭头函数）

上述的几种规则适用于所有的正常函数，但不包括ES6的箭头函数。箭头函数不使用this的四种标准规则，而是根据外层（函数或者全局）作用域（词法作用域）来决定this

function foo() {
// 返回一个箭头函数
    return (a) => {
        //this 继承自foo()
        console.log( this.a );
    };
}
var obj1 = {
    a:2
};
var obj2 = {
    a:3
};
var bar = foo.call( obj1 );
bar.call( obj2 ); // 2, 不是3 ！

foo() 内部创建的箭头函数会捕获调用时foo() 的this。由于foo() 的this 绑定到obj1，bar（引用箭头函数）的this 也会绑定到obj1，箭头函数的绑定无法被修改。（new 也不行！）

几个例子加深理解

this的理论知识讲解得差不多了，来几个例子看看自己有没有理解全面：

1.经典面试题：以下输出结果是什么

var length = 10;
function fn() {
    console.log(this.length);
}
var obj = {
  length: 5,
  method: function(fn) {
    fn();
    arguments[0]();
  }
};
obj.method(fn, 1);

obj中method方法里面调用了两次fn。第一次是直接调用的“裸露”的fn,因此fn()中this使用默认绑定，this.length为10.第二次调用时通过arguments0的方式调用的，arguments[0]其实指向的就是fn，但是是通过obj[fn]这种对象上下文的隐式绑定的，因此this指向arguments，而arguments只有一个一项(method中只有fn一个参数)，因此arguments.length为1。因此打印的结果为：

10
1

2.以下输出什么

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = function () {
            return new Date().getFullYear() - this.birth; // this指向window或undefined
        };
        return fn();
    }
};
obj.getAge();

答案是严格模式下会报错，非严格模式下输出NaN

原因也是因为在调用obj.getAge()后，getAge方法内的this使用隐式绑定。但是return fn()的时候用的是“裸露的fn”使用默认绑定，fn里面的this指向window或者undefined。

使用箭头函数来修正this的指向：

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
        return fn();
    }
};
obj.getAge(); // 25

使用箭头函数后，fn中的this在他的词法分析阶段就已经确定好了（即fn定义的时候），跟调用位置无关。fn的this指向外层的作用域（即getAge中的this）

3.以下输出为什么是'luo'

var A = function( name ){ 
    this.name = name;
};
var B = function(){ 
    A.apply(this,arguments);
};
B.prototype.getName = function(){ 
    return this.name;
};
var b=new B('sven');  // B {name: "luo"}
console.log( b.getName() ); // 输出:  'luo'

执行new B('seven')后会返回一个新对象b,并且B函数中的this会绑定到新对象b上，B的函数体内执行A.apply(this.arguments)也就是执行b.name = name;这个时候b的值就是{name:'luo'},所以b.getName()就能输出'luo'啦~

实际在业务使用中，逻辑会更复杂一些，但是万变不离其宗，都按照上面写的规则来代入就好了

本文来自 js教程 栏目，欢迎学习！  

The above is the detailed content of Summary of this binding method in JavaScript. For more information, please follow other related articles on the PHP Chinese website!