The this point in the JS function (above)
1. this is in the global scope
①This is tested in the browser to point to window (GlobalObject)
②In the node environment, print this, which is an empty object { }
2. This is used in the function
When the function is called, what this points to has nothing to do with the location of the definition (where it is written), it
is related to the way the function is called
case:
function foo() {
console.log(this);
}
// 1.直接调用这个函数
foo(); //window对象
// 2.创建一个对象, 对象中的函数指向foo
var obj = {
name: "why",
foo: foo,
};
obj.foo(); //obj对象
// 3.apply调用
foo.apply("abc"); //String {'abc'}
3. Binding rules
3.1. Rule 1: Default binding (independent function call):
It can be understood that the function is not bound to an object for calling;
this is pointing to the window object
case:
// 1.案例一:
function foo() {
console.log(this);
}
foo(); //window
// 2.案例二:
function foo1() {
console.log(this); //window
}
function foo2() {
console.log(this); //window
foo1();
}
function foo3() {
console.log(this); //window
foo2();
}
foo3();
// 3.案例三:
var obj = {
name: "fifi",
foo: function () {
console.log(this);
},
};
var bar = obj.foo;
bar(); // window
// 4.案例四:
function foo() {
console.log(this);
}
var obj = {
name: "fifi",
foo: foo,
};
var bar = obj.foo;
bar(); // window
// 5.案例五:
function foo() {
function bar() {
console.log(this);
}
return bar;
}
var fn = foo();
fn(); // window
var obj = {
name: "fifi",
eating: fn,
};
obj.eating(); // 隐式绑定 obj对象
3.2. Rule 2: Implicit binding:
It is called through an object; that is, in its calling position, it is a function call initiated through an object.
this points to the object calling this function
A prerequisite for implicit binding: there must be a reference to the function (such as a property) inside the called object
If there is no such reference, an error that the function cannot be found will be reported when calling; it is through this reference that the function will be indirectly
this is bound to this object;
隐式绑定：object.fn()
object对象会被js引擎绑定到fn函数的中this里面
case:
// 1.案例一:
function foo() {
console.log(this);
}
var obj = {
name: "fifi",
foo: foo,
};
obj.foo(); // obj对象
// 2. Case 2:
var obj = {
name: "fifi",
eating: function () {
console.log(this.name + "在吃东西");
},
running: function () {
console.log(obj.name + "在跑步");
},
};
obj.eating(); //fifi在吃东西
obj.running(); //fifi在跑步
var fn = obj.eating;
fn(); //独立函数调用 //在吃东西
// 3. Case 3:
var obj1 = {
name: "obj1",
foo: function () {
console.log(this);
},
};
var obj2 = {
name: "obj2",
bar: obj1.foo,
};
obj2.bar(); //obj2
3.3. Rule 3: Explicit binding: call, apply, bind
(I don't want to include a reference to this function inside the object, but at the same time I want to make a mandatory call on this object), these three objects can specify this binding
The difference between call and apply:
The first parameter is the same, and they are all passed in the object that you want this to bind to.
For the following parameters, apply is passed in as an array , and call is passed in as a parameter list
//call和apply有什么区别?
function sum(num1, num2, num3) {
console.log(num1 + num2 + num3, this);
}
sum.call("call", 20, 30, 40); //90 String {'call'}
sum.apply("apply", [20, 30, 40]); //90 String {'apply'}
case:
//案例一：
function foo() {
console.log("函数被调用了", this);
}
var obj = {
name: "obj",
};
// call / apply是可以指定this的绑定对象;
foo.call(obj); //函数被调用了 (obj对象){name: 'obj'}
foo.apply(obj); //函数被调用了 obj对象
foo.apply("aaaa"); // 函数被调用了 String {'aaaa'}
//Case 2:
function foo() {
console.log(this);
}
foo.call("aaa"); //String {'aaa'}
// 默认绑定和显示绑定bind冲突: 优先级(显示绑定)
var newFoo = foo.bind("aaa");
newFoo(); //String {'aaa'}
var bar = foo;
console.log(bar === foo); //true
console.log(newFoo === foo); //false
3.4, Rule 4: new binding:
When calling a function through a new keyword (this function can be used as a class constructor),
At this time, this is the object created when calling this constructor, and this points to the created object
case:
function Person(name, age) {
this.name = name;
this.age = age;
}
var p1 = new Person("fifi", 18);
console.log(p1.name, p1.age); //fifi 18
var p2 = new Person("haha", 30);
console.log(p2.name, p2.age); //haha 30