Detailed explanation of this attribute in JavaScript

This article mainly introduces the this attribute in JavaScript. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor and take a look.

This always returns an object , that is, returns the property or method where is currently located object.

The properties of an object can be assigned to another object, so the current object where the properties are located is variable, that is, the point of this is variable.

eg:

var A = {
	name : '张三',
	describe : function(){
		return '姓名：' + this.name;
	}
};
var B = {
	name : '李四'
}
B.describe = A.describe;
B.describe();

Result: "Name: Li Si"

Look at another example:

var A = {
	name : '张三',
	describe : function(){
		return '姓名：' + this.name;
	}
};
var name = '李四'
f = A.describe;
f();

The result is also "Name: Li Si", because at this time this points to the object where f is running - the top-level window

Usage occasions of this

1. Global environment ——No matter whether this is inside the function or not, as long as it is run in the global environment, this refers to the top-level object window

2. Constructor ——Refers to the instance object

eg:

var Obj = function(p){
	this.p = p;
}
Obj.prototype.a = function(){
	return this.p;
}
var obj = new Obj('color');
obj.a();
obj.p;

The result is that "color" is returned

The above code defines a constructor Obj. Since this points to the instance object, defining this.p in Obj is equivalent to defining an instance object. p attribute, and then the m method can return this p attribute.

3. Object methods

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

Only when the foo method is directly called on the obj object, this will point to obj. In other uses, this will point to the object where the code block is currently located.

Case 1: (obj.foo = obj.foo)()——window

Case 2: (false || obj.foo)()——window

Case 3: (1, obj.foo)()——window

In the above code, obj.foo is calculated first and then executed. Even if its value does not change, this no longer points to obj

4. Node

In Node, if it is in the global environment, this points to global, and in the module environment, this points to module.exports

Notes on using this

1. Avoid multiple layers of this

var o = {
	f1 : function(){
		console.log(this);
		var f2 = function(){
			console.log(this);
		}();
	}
}
o.f1();

The execution result is:

{f1: ƒ}

Window {decodeURIComponent: ƒ, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}

Why does this in f2 point to the global object? Because the execution process of the above code is actually

var temp = function(){
	console.log(this);
};
var o = {
	f1 : function(){
		console.log(this);
		var f2 = temp();
	}
}
o.f1();

Solution 1 - Use a variable pointing to the outer this in the second layer

var o = {
	f1 : function(){
		console.log(this);
		var that = this;
		var f2 = function(){
			console.log(that);
		}();
	}
}
o.f1();

Use a variable to fix the value of this , and then the inner layer calls this variable, which is a very useful and widely used method.

Solution 2 - Use strict mode. In strict mode, if this inside the function points to the top-level object, an error will be reported.

2. Avoid using this

var o = {
	v : 'hello',
	p : ['a1','a2'],
	f : function(){
		this.p.forEach(function(item){
			console.log(this.v + ' ' + item);
		});
	}
}
o.f();

in the array processing method. Result:

undefined a1

undefined a2

leads to this result. The reason is the same as the multi-layer this in the previous paragraph.

Solution one - use intermediate variables

var o = {
	v : 'hello',
	p : ['a1','a2'],
	f : function(){
		var that = this;
		this.p.forEach(function(item){
			console.log(that.v + ' ' + item);
		});
	}
}
o.f();

Solution two - treat this as the second parameter of the forEach method, fixed Its running environment

var o = {
	v : 'hello',
	p : ['a1','a2'],
	f : function(){
		this.p.forEach(function(item){
			console.log(this.v + ' ' + item);
		},this);
	}
}
o.f();

3. Avoid this in the callback function

var o = new Object();
o.f = function(){
	console.log(this === o);
}
o.f();//true
$("#button").on("click",o.f);//false

How to bind this

JavaScript provides call, apply, bind has three methods to switch/fix the pointer of this

function.prototype.call()

The call method of a function instance can specify the role of this when the function is executed. Domain, the parameter of the call method is an object. If the parameter is empty, null, or undefined, the global object will be passed in by default. If the call parameter is not an object, it will be automatically wrapped into a wrapping object. func.call(thisValue,arg1,arg2,...)

var n = 123;
var obj = {n : 456};
function a(){
	console.log(this.n);
}

a.call();//123
a.call(null);//123
a.call(undefined);//123
a.call(window);//123
a.call(obj);//456

An application of the call method is to call the native method of the object

var obj = {};
//原生方法
obj.hasOwnProperty('toString');//false
//覆盖了原生的方法
obj.hasOwnProperty = function(){
	return true;
}
obj.hasOwnProperty('toString');//true
//调回原生的方法
Object.prototype.hasOwnProperty.call(obj,'toString');//false

function.prototype.apply()

The only difference between apply and call is that apply accepts an array as a parameter when the function is executed, func.apply(thisValue,[arg1,arg2,...])

The application of apply One - Find the largest element of the array

var a = [10,3,4,2];
Math.max.apply(null,a);

Apply application two - Change the empty elements of the array to undefined (because the forEach method of the array will skip empty elements, but will not skip undefined) ?

var a = ['a','','b'];
function print(i){
	console.log(i);
}
a.forEach(print);//a b
Array.apply(null,a).forEach(print);//a undefined b

The running results are not the same as above, they are all a b

Apply application 3 - Convert array-like objects

Array.prototype.slice.apply({0:1,length:1});

Apply application 1 Four - the object of the bound callback function

var o = new Object();
o.f = function(){
	console.log(this === o);
}
var f = function(){
	o.f.apply(o);//或o.f.call(o);
}
$("#button").on("click",f);

function.prototype.bind()

bind method is used to bind this in the function body to an object and then return a new function

The following example will cause an error after assigning a value to the method

var d = new Date();
d.getTime();
var print = d.getTime;
print();//Uncaught TypeError: this is not a Date object.

Solution:

var print = d.getTime.bind(d);

bind is a step further than call and apply. In addition to binding this, it also You can bind the parameters of the original function

var add = function(x,y){
	return x * this.m + y * this.n;
}
var obj = {
	m:2,
	n:2
}
var newAdd = add.bind(obj,5);//绑定add的第一个参数x
newAdd(5);//第二个参数y

For those old browsers that do not support the bind method, you can define the bind method yourself

if(!('bind' in Function.prototype)){
	Function.prototype.bind = function(){
		var fn = this;
		var context = arguments[0];
		var args = Array.prototype.slice.call(arguments,1);
		return function(){
			return fn.apply(context,args);
		}
	}
}

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