js function - this invisible parameters

Foreword

  this is a function of the hidden parameters depends on the value of its bound function call site.

this definition

  "You do not know js" in this to say: It is a function of the body's implicit argument, this is a property record function call context. Call context can use this reference function in the function body. this binding is to call attention to the location of the function.

  Call position: the position is when you call the function, the position is different from the function declaration.

this binding rules

  this binding depends on the position of calling a function, according to different scenarios, there are four bound mode (default, implicitly, a display, call configuration binding). When various circumstances exist, we rely on the four priority rules in using the corresponding binding.

  Default binding

    When the function is called directly without any modification. No matter where you call, it points to is the global object (pointing browser environment is window). Note: this will be bound to undefined strict mode.

function run(){
    console.log(this); //window
    console.log("running");
    function speak(){
        console.log("speak");
        console.log(this);  // window
    }
    return speak;
}
run()();

  Invisible binding

    When the function has a context object, the implicit this binding rule will function call is bound to the context object.

// when properties of an object has a reference to the function regardless of any form, object properties call this function, the function calls the current context is this object. 
function foo () { 
    the console.log ( this II.A); 
} 
var obj = { 
    A: . 1 , 
    foo: foo 
} 
obj.foo ();   // . 1 
// direct context: call affects only the last layer of this tie set

function foo(){
  console.log(this.a);
}
var obj1 = {
  a:1,
  foo:foo
}
var obj2 = {
  a:2,
  obj1:obj1
}
obj2.obj1.foo(); // 1

  Show Binding

    Binding objects to directly specify this display is called the binding. js All functions are inherited call and apply these two methods from the Function.prototype. They are used to display the time in which this execution of the specified function.

    call and apply the similarities and differences:

      The same purpose: wherein are used to specify when this function is executed.

      Number and type of different parameters: apply accepts two parameters, a first execution values ​​are to be bound on this function, the second is an array. call received is a list of parameters, parameters need to pass one by one, he would bind the first parameter to this function to perform this up.

      Processing parameters: The successively passed to the function performed by the second argument would apply (Array type) to expand. taking a first call is bound to this, and then successively passed parameters behind this function is performed.

Note: argument is another implicit argument in the function body. Can get the function is a function in vivo, the received argument. It is a pseudo-array elements, and wherein the one-argument 
//
following output from Chrome function Test () { the console.log (test.arguments); } // Apply the array [2,3] is deployed divided into three parameters were passed test. test.apply (} {, [l, 2,3]); // the Arguments (. 3) [. 1, 2,. 3, the callee: ƒ, the Symbol (Symbol.iterator): ƒ] // Call array [1,2 , 3] as a parameter passed into the test test.call ({}, [l, 2,3]); // the Arguments [the Array (3), the callee: ƒ, the Symbol (Symbol.iterator): ƒ]

  Common Operations

// Use call to invoke the array map method. 
var arr = [1,2,3,4];
Array.prototype.map.call(arr,function(item){
    console.log(item); // 分别输出 1 2 3 4
})

new绑定

  使用new 操作符调用函数叫做构造调用。函数做构造调用时,其中this的绑定。函数做构造调用时其中有四个默认操作。

  1,创建一个新的对象。

  2,这个对象会被执行原型链接(添加到构造函数的原型链的末尾)。

  3,把当前正在做构造调用的函数中的this绑定到新创建的对象。

  3,如果函数没有显式的返回其他对象,那么默认返回这个新建的对象。

// 对foo进行构造调用创建一个新的对象
function foo(a){
    this.a = a;
}
var bar = new foo(2);
console.log(bar.a);

  js中的构造函数

    1,只是使用new操作符调用的普通函数。

    2,不属于某个类,也不会实例化某个类。

    3,所有函数使用new 进行调用时都被称作构造调用。

    4,js中不存在面向类语言意义上的构造函数,只有基于new操作符号的构造调用。

Guess you like

Origin www.cnblogs.com/keliguicang/p/10961088.html