This definition
This is the pointer to the object on which we called the function; This is a JavaScript keyword. It is an object that is automatically generated in the body of a function while it is running, and can only be used inside the body of the function.
This rule
This is a confusing concept for many people, but it is not difficult at all. You just need to remember a few rules.
- In the global environment this refers to the global variable (window)
- Once this is bound, it will not be changed by any code.
- For this,
newIs the highest priority iflet c=new foo(), thenfoo()This is bound to c. - Call, apply, and bind change this, next in priority to new.
- The arrow function’s this depends on the this of the first function outside of it that isn’t the arrow function.
- In a function, this depends on how the function is called. (1) If the function is called independently, this refers to undefined in strict mode, and window in non-strict mode. (2) If the function is called on an object, this refers to the object being called.
This classic problem
/*----------- -------------------*/
var obj = {
a: 10.b: this.a + 10.// Where this refers to window (rule 1), a is undefined
fn: function () {
return this.a; }}console.log(obj.b); //NaN (rule 1)
console.log(
obj.fn(), //10 (Rule 6 (2))
obj.fn
//fn (interference item, function without () is equivalent to a variable, function will only run if (), return the corresponding return value)
);
Copy the code/**-------------
var a = 20;
var obj = {
a: 10.getA: function () {
return this.a; }}console.log(obj.getA()); / / 10
var test = obj.getA; // test: function (){return this.a; }
console.log(test()); / / 20
// Call test(), equivalent to calling function (){return this.a; },
Function (){return this.a; } (Rule 6 (1))
Copy the code/*----------- -------------------*/
var a = 5;
function fn1(){
var a = 6;
console.log(a); / / 6
console.log(this.a); / / 5
}
function fn2(fn) {
var a = 7;
fn();
}
var obj = {
a: 8.getA: fn1 // Note that fn1 without () is equivalent to variable assignment
GetA: function() {var a = 6; console.log(a); //6 console.log(this.a); / / 5}
}
fn2(obj.getA); // 6 5 // Note that obj. GetA does not add (), which is equivalent to variable assignment,
Function () {var a = 6; console.log(a); //6 console.log(this.a); / / 5}
// So the function is still equivalent to a single call, output 6 5. (Rule 6 (1))
Copy the code/*-----------题 4 -------------------*/
function fn( ) {
'use strict';
var a = 1;
var obj = {
a: 10.c: this.a + 20 // In strict mode, a refers to undefined, undefined
}
return obj.c;
}
console.log(fn()); // Output error == "a undefined (Rule 6 (1))
Copy the code/*----------- topic 5 -------------------*/
// Declare a constructor
function Person(name, age) {
this.name = name;
this.age = age;
console.log(this);
}
// Person(); / / this point to the window
Person.prototype.getName = function () {
console.log(this);
};
var p1 = new Person("test".18);// Person {name: "test", age: 18}
p1.getName();// Person {name: "test", age: 18}
Copy the code var obj = {
foo: "test".fn: function(){
var mine = this;
console.log(this.foo); //test
console.log(mine.foo); //test
(function(){
console.log(this.foo); //undefined Since this immediate function is called independently, so this refers to window (rule 6 (1))
console.log(mine.foo); //test
})();
}
};
obj.fn();
Copy the code
/* --------- 题 7 ----------- */
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 Notice that no () is assigned, so this refers to window (rule 6 (1))
p.foo = o.foo;
p.foo(); //4 function is executed by p, p calls to p (rule 6 (2))
Copy the code /* --------- 题 8 ----------- */
function foo() {
console.log(this.a);
}
var obj1 = {
a: 3.foo: foo
};
var obj2 = {
a: 5.foo: foo
};
obj1.foo(); //3 (Rule 6 (2)
obj2.foo(); //5 (Rule 6 (2)
obj1.foo.call(obj2); //5 (Rule 4)
obj2.foo.call(obj1); //3 (Rule 4)
Copy the code/* --------- ----------- */
function test(arg) {
this.x = arg;
return this;
}
/** var x = test(5); --> window.x = window.test(5); * /
var x = test(5); // when x = window x (window) overwrites x (5)
var y = test(6); // when x = 6, y = window, x (6) overwrites x (window)
console.log(x.x); //undefined, actually 6. X is undefined (Rule 6 (2))
console.log(y.x); //6 is actually window.x = 6 (rule 6 (2))
Copy the code
/* --------- topic 10 ----------- */
var obj = {
data: [1.2.3.4.5].data2: [1.2.3.4.5].fn: function () {
console.log("--test--");
console.log(this); / / {data: Array (5), data2: Array (5), fn: ƒ, fn2: ƒ}
return this.data.map(function (item) {
console.log(this); // --> window (independent call (Rule 6 (1))
return item * 2;
});
},
fn2: function () {
console.log("---test2---");
console.log(this); / / {data: Array (5), data2: Array (5), fn: ƒ, fn2: ƒ}
return this.data2.map(item= >{
console.log(this); Obj {data: Array(5), data2: Array(5), fn: ƒ, fn2: ƒ} arrow function (rule 5)
return item * 2; }); }}; obj.fn(); obj.fn2();Copy the code