javascript this keyword
- What this is
this is one of the keywords in javascript. He is using an internal target object is automatically generated, can only be used inside the object. And it will vary according to context, and will show a difference of JavaScript in different modes (whether strict mode).
- this is the key point
this point depends on where in what way call, instead of creating the time. Arrow functions inherited from the scope of this execution context, the function itself does not bind this arrow, so the value of this will look in the call stack.
- this binding rules
Default binding: direct use function calls without any modification, and only use the default default binding. Generally bound to the window, strict mode is undefined;
invisible bindings: obj.foo () function to perform when there is a context object is obj. In this case, the function default binding is its context object. If a chain relationship, xx.yy.obj.foo (); context take immediate superior function, i.e. the immediately obj, or the last object chain. When bound to the context object function is assigned to a new function, and then call this new function when an incoming callback:: (implicit loss. In fact, this is the first case of variant, in fact, is a parameter passing . kind of implicit assignment in addition to developer-defined function, the function passed in the language built-in functions such as setTimeout, the same will be the case implicit loss occurs).
dominance binding: (stealth bound words: there must be a context that contains our function, which will require explicit bound) 1. call, appy, bind . 2. new. this binding is newly created object, for example: var bar = new foo () ; foo function is called in this newly created object foo, and then the object is assigned bar, so called new way binding binding
new binding: as long as the new modified function in js is the 'constructor' constructor calls the function is accurate, because there is no so-called 'constructor' in the js. After the constructor function is called to do with the new, js what has been done to help us:
Create a new object;
This __proto__ properties of the new object points to the prototype property of the original function. (Ie inherited prototype of the original function);
this is bound to this new object on this function.
It returns a new object, if the function does not return other objects.
The arrows in this scope inherited from the execution context, the function itself does not bind this arrow, this arrow binding function can not be modified.
- this binding priority
new bindings> Show Binding> implicit binding> default binding - call,apply,bind
Points are used to change the function of this object.
The first argument is to point to this target.
Subsequent parameters can use parameter passing.
call: From the beginning of the second parameter known parameters are parameters of the original function. apply: only accepts two parameters, and the second argument must be a list of parameters array that represents the original function. bind: only one function, and will not be executed immediately, but will bind a value to this function, and returns good binding function. bind the corresponding function is returned, to facilitate later call; apply, call is immediately invoked.
- Code examples
1. 默认绑定
function foo(){
var a = 1 ;
console.log(this.a); // 10
}
var a = 10;
foo();
2. 隐性绑定
function foo(){
console.log(this.a);
}
var obj = {
a : 10,
foo : foo
}给大家推荐一个前端学习进阶内推交流圈子685910553
foo(); // undefined (默认绑定)
obj.foo(); // 10
// 隐式丢失（引用赋值）
var a = 0;
function foo(){
console.log(this.a);
};
var obj = {
a : 2,
foo:foo
}
//把obj.foo赋予别名bar，造成了隐式丢失，因为只是把foo()函数赋给了bar，而bar与obj对象则毫无关系
var bar = obj.foo;
bar();//0
//等价于
var a = 0;
var bar = function foo(){
console.log(this.a);
}
bar();//0
// 隐式丢失（参数传递）参数传递其实就是一种隐式赋值，因此我们传入的函数也会被隐式赋值。
function foo(){
console.log(this.a);
}
function doFoo(fn){
//fn其实引用的是foo
fn();//调用位置
}
var obj = {
a:2,
foo:foo
};
var a = "oops,global";//a是全局对象的属性
doFoo(obj.foo);//oops,global
//如果把函数传入内置的函数中结果是一样的
function foo(){
console.log(this.a);
}给大家推荐一个前端学习进阶内推交流圈子685910553
var obj = {
a:2,
foo:foo
};
var a = "oops,global";//a是全局对象的属性
setTimeout(obj.foo,100);//oops,global
3. 显性绑定
function foo(){
console.log(this.a);
}
var obj = { a : 10 };
foo = foo.bind(obj);
foo(); // 10
function foo(){
this.a = 10;
console.log(this);
}
foo(); // window对象
console.log(window.a); // 10 默认绑定
var obj = new foo(); // foo{ a : 10 } 创建的新对象的默认名为函数名
// 然后等价于 foo { a : 10 }; var obj = foo;
console.log(obj.a); // 10 new绑定
//给大家推荐一个前端学习进阶内推交流圈子685910553
// 使用new调用函数后，函数会 以自己的名字 命名 和 创建 一个新的对象，并返回。
//如果原函数返回一个对象类型，那么将无法返回新对象,你将丢失绑定this的新对象。
function foo(){
this.a = 10;
return new String("捣蛋鬼");
}
var obj = new foo();
console.log(obj.a); // undefined
console.log(obj); // "捣蛋鬼"