So what is this, new, bind, call, apply it? Which is something you used it? Master the basic foundation of all the content. If you do not know, I will not hurry to review the review, online access to information about her!
By call, apply, bind can change the point of this, this general point to point to its caller, the default mount in the window object. es6 arrow function, this points to the creator, not the caller.
const func = function () {
console.log(this);
const func2 = function () {
console.log(this);
};
func2(); //Window
};
func(); //Window'use strict'
const func = function () {
console.log(this);
const func2 = function () {
console.log(this);
};
func2(); //undefined
};
func(); //undefinedvar a = 2
var obj = {
a: 4,
foo:() => {
console.log(this.a)
function func() {
this.a = 7
console.log(this.a)
}
func.prototype.a = 5
return func
}
}
var bar = obj.foo()
// 浏览器中输出: 2
bar()
// 浏览器中输出: 7
new bar()
// 浏览器中输出: 7General methods used in this function the global object:
function test(){
this.x = 1
console.log(this.x)
}
test()
// 1As constructor calls, this new point instantiated objects:
function test(){
this.x = 1
}
var o = new test()
alert(o.x)
// 1First, this study, need to know, what does? The most important point of this is to type it, you should determine how it points to this in JavaScript?
this is determined at the time the function is called, it all depends on the point where the function call, rather than where it is declared. (Except arrow function) remember one thing: this has always been its objects point to call the object methods of this, it points to an object invocation.
var obj = {
a: 1,
b: {
a: 2,
func: function() {
console.log(this.a); // 输出结果为2
console.log(this); // 输出结果是b对象
}
}
}
// 调用
obj.b.func();var obj = {
a: 1,
b: {
func: function() {
console.log(this.a); // undefind
console.log(this); // b对象
}
}
}
// 调用
obj.b.fun();Change the calling method, does not directly call:
var obj = {
a: 1,
b: {
a: 2,
func: function() {
console.log(this.a); // undefined 若在对象obj外定义a,则输出的就是其在外定义的值
console.log(this); // window
}
}
}
var j = obj.b.func;
// 只是将b对象下的方法赋值给j，并没有调用
j();
// 调用，绑定的对象是window，并非b对象直接调用In most cases, the function is called determines the value of this, this can not be assigned during execution, and each time the function is called, this value may be different. Context this context object pointed object called function, this embodiment is directed depending on the function being called.
function foo() {
console.log(this);
}So I ask you? Where is this point? Ha ha ha, you should know it is not, because no one who calls the point, no function is called, does not know the point.
function foo() {
console.log(this);
}
// window全局对象
> undefined
// obj对象
var obj = {
foo: foo
}
obj.foo();
> {foo:f}Directly call the function by function name, this points to a global variable window, through the object, the function name calls the function, this points to the object. When a function is called, it will create an execution context, which includes where the function is called, the information function is called, the incoming parameters.
this usage scenarios:
As new constructor is called as an object method, as a function of direct call, is this call, apply, bind call, arrow function.
Basics: this refers to the function of internal problems:
var myObj = {
foo: "bar",
func: function() {
var self = this;
console.log(this.foo);
console.log(self.foo);
(function() {
console.log(this.foo);
console.log(self.foo);
}());
}
}
myObj.func();result:
bar
bar
undefined
barIn the object method call:
var location = {
x: 0,
y: 0,
move: function(x,y) {
this.x = this.x + x;
this.y = this.y + y;
console.log(this.x); // 1
console.log(this.y); // 1
}
};
location.move(1,1)
// this绑定到当前对象，即为location对象As a function call:
function func(x) {
this.x = x;
}
func(2);
// 函数被调用时，this绑定的时全局对象window，相当于直接声明了一个全局变量x
console.log(x);
// x已经成为一个值为5的全局隐式变量Object this points to the problem:
var a = 1;
function printA() {
console.log(this.a);
}
var obj = {
a: 2,
foo: printA,
bar: function() {
printA();
}
}
obj.foo(); // 2
obj.bar(); // 1
var foo = obj.foo;
foo(); // 1
This point is not a function declaration binding upon, but in the course of running dynamic binding function.
Front-end written:
function a(xx) {
this.x = xx;
return this;
}
var x = a(5);
var y = a(6);
console.log(x.x); //undefined
console.log(y.x); //6
Base: new bindings, binding explicit, implicit binding, default binding, binding of the this priority, the function of the arrow this.
Arrow function of this is to decide this based on the place of its declaration, it is knowledge ES6 appear arrows function in this, is not through the call, apply, bind modified, and because the arrow function has no constructor constructor, nor can lead to new calls can not be used as a constructor, or an error.
Arrow can not function arguments, super, this local binding or new.target defined. Arrow function of any reference arguments, super, this or new.target are resolved to the current location as a lexical binding domain, generally, this is a function of where the arrow function scope.
In this different point of the scene:
// 匿名函数中的this指向全局对象
var a = 2;
var func = {
a: 4,
fn: (function() {
console.log(this); // window
console.log(this.a); // 2
})()
}// setInterval和setTimeout定时器中的this指向全局对象
var a = 2;
var oTimer = setInterval(function(){
var a = 3;
console.log(this.a); // 2
clearInterval(oTimer);
},100);// eval中的this指向调用上下文中的this
(function() {
eval("console.log(this)"); // window
})();
function Foo() {
this.bar = function(){
eval("console.log(this)"); // Foo
}
}
var foo = new Foo();
foo.bar();// apply 和 call中的this指向参数中的对象
var a = 2;
var foo = {
a: 20,
fu: function(){
console.log(this.a);
}
};
var bar = {
a: 200
}
foo.fu.apply(); // 2（若参数为空，默认指向全局对象)
foo.fu.apply(foo); // 20
foo.fu.apply(bar); // 200this binding priorities: Priority: new bindings> Show Binding> implicit binding> default binding
new binding: There are new function calls, this is bound to the newly created object
Show Binding: function have bind, apply, call to call, this is bound to the specified object
implicit binding: whether the function in a context object to call, this is bound to a context object that
default binding: in strict mode, it is bound to undefined, otherwise bound to the global object
new bindings: When using the new function calls, this is bound to an instance constructor of the newly created
function func() {
console.log(this)
}
var bar = new func()
// func实例，this就是barFocus, create a new object, prototype constructor is assigned to __proto__ the new object, the new object is assigned to the current this, the constructor is executed, if the function does not return other objects, then the function new expression is automatically return the new object.
Display Binding: call, apply, bind this function can be used to modify binding
function fn (name, price){
this.name = name
this.price = price
}
function Food(category, name, price) {
fn.call(this, name, price) // call方式调用
// fn.apply(this, [name,price]) // apply方式调用
this.category = category
}
new Food('水果','苹果','6');call and apply difference:
call methods accepted the argument list
apply methods accepted parameter array
fu.call(this, arg1, arg2, ...) // call
fu.apply(this, [arg1,arg2, ...]) // applyfunc.bind(thisArg[, arg1[, arg2[, ...]]])
// bind 用法Implicit binding: the function is invoked in the context of an object, if it is, this is bound to the context object.
var a = 'hello5'
var obj = {
a: 'world',
foo: function() {
console.log(this.a)
}
}
obj.foo()
// 浏览器中输出: "world"var a = 'hello555'
var obj = {
a: 'world555',
b:{
a:'Ch',
foo: function() {
console.log(this.a)
}
}
}
obj.b.foo()
// 浏览器中输出: "Ch"Default binding:
var a = 'hello'
function foo() {
var a = 'world'
console.log(this.a)
console.log(this)
}
foo()
// 相当于执行 window.foo()
// 浏览器中输出: "hello"
// 浏览器中输出: Window 对象var a = 'hello'
var obj = {
a: 'world55',
foo: function() {
console.log(this.a)
}
}
var bar = obj.foo
bar()
// 浏览器中输出: "hello"var a = 'hello'
var obj = {
a: 'world55',
foo: function() {
console.log(this.a)
}
}
function func(fn) {
fn()
}
func(obj.foo)
// 浏览器中输出: "hello"
On the current content of the article that is involved in front-end, PHP knowledge, if you are interested to follow, very honored, can you find really identify what the British! Also thank you for your attention in the coming days, hoping been quietly supporting me, I will try to write more good works. We grow together, learn from the zero-based programming, the user-friendly front-end Web presentation areas, data structures and algorithms, network theory, etc. to the junior partner. Share Web front-end related technical articles, tools, resources, course selection, hot information.
Feedback:
If the contents of this number do not get bit places (for example: to copyright or other problems), please contact us to rectify, will be processed in the first time.
Thanks for reading, originality is not easy, like to point a praise it, this is my biggest motivation of writing.
Welcome concern Dada Jane book!
This is a quality, attitude blog
