Today, with everyone together to learn about simple js an interesting thing, the this .
When we use the js object-oriented thinking to write the variables between the various modules is not so easy to get to, of course, also a function of other variables can get by way of closure, if each get a variable, have a way to get closure, it is too cumbersome, and this time js also provides a way to get the other variables, of course, provided that there is a link between these functions, for example, is tied to the function 2 , then a function with a variable of this specified in function 2 can also be used to obtain this function to the prototype 1, the course of which there is a certain rule. So then I give you this to make a detailed presentation
One: in the end what is this it?
Concept: execution context, this is generally present in the function, representing the current execution context function, if the function is not implemented, then this is not the content, only this function only binding after execution.
Note: this only points to the object, of course, do not forget the array is a special object.
Two: this point in the end who is it?
In fact, this point is with this position is related to the implementation of different locations execution position, this point might change.
Tip: this is performed by whom, this is who executed this time must be careful whom this is performed directly!
Then the next question to you summarize a few points to this.
1: default execution: this points to the window, in strict mode, this points to the undefined
EG:
function Fn () {
" use strict " ;
the console.log ( the this );
}
Fn ();
this time in strict mode, points to undefined, remove the strict mode, point window
2: Implicit executed (performed by the object): performed by context object
We are here to organize five common example of this misdirection
2.1 changing the function reference
EG:
var obj = {
name: ' ADMIN ' ,
Show: function () {
the console.log ( the this .name);
}
}
var newShow = obj.show;
newShow ();
// the this point the window, performs the function object becomes a window
2.2 function parameter passing
eg: var name='window'; var obj = { name: 'obj', show: function(){ console.log(this.name); } } function trigger(fn){ fn(); } trigger(obj.show); //this指向window
2.3: Timer mass participation
var name='window';
var obj = {
name: 'obj',
show: function(){
console.log(this.name);
}
}
setTimeout(obj.show,1000);
//this指向了window
2.4: DOM object events
var name = 'window';
var oHtml = document.documentElement;
var obj = {
name: 'obj',
show: function(){
console.log(this.name);
}
}
oHtml.name = 'DOM';
oHtml.onclick = obj.show;
//this指向了window
2.5:arguments类数组改变this指向问题
tip:传入过多的实参，多余的实参虽然没有什么用，但也是保存在函数中了
var length = 10;
function fn(){
console.log(this.length);
}
var obj = {
length: 5,
method: function(fn){
fn();
arguments[0]();
}
};
obj.method(fn,"111","222");
//打印结果为10,3
tip1:
obj.method的value并不是一个可以直接直接执行的函数，通过obj.method并不能执行函数，
所以this指向的并不是obj,输出的不是5，this指向的是function这个无名函数，他的执行对象直接是window,发生隐式丢失
但是arguments[0]();也会执行，因为传入的第一个参数就是一个函数，同时传进了两个多余的实参，所以打印出的为3
tip2:
数组是很特殊的对象，他的索引值相当于是obj2对象中的属性值。所以说数组，类数组也会改变this指向问题。
3：显示执行
通过函数的bind或call或apply执行
tip:当发生隐式执行的时候，还希望能拿到指定的this，可以通过函数的一些方法，强行改变到指定的this
这里拿bind方法给大家做一下介绍
bind()方法会创建一个新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以创建它时传入bind()方法的第一个参数作为this，
传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。
tip:改变this的指向，简单来说，可以让没有这个功能的对象，具有另一个对象的功能
当blind（）；有多个参数的时候，第一个参数表示this的指向，其他的参数会与原函数的参数一起放在新函数中
eg1:
var a = {
name:"admin"
}
var b = {
name:"uesr",
show:function(){
console.log(this.name);
}
}
b.show();
var c = b.show.bind(a);
c();
//此时的c能够获取到a里面的name,利用a强行将this指向了a
eg2:
常用方式，用来改变函数内计时器函数this的指向
for(var i=0;i<ali.length;i++){
ali[i].onclick = function(){
setTimeout(function(){
console.log(this)
}.bind(this),500)
}
}
//不用blind()方法，this直接指向的是window，强行给计时器函数加了blind()方法，这时候谁触发了函数的执行，this就指向了谁。