10.9 this

The function’s this keyword behaves slightly differently in JavaScript. There is a slight difference between strict mode and non-strict mode

In the vast majority of cases, how the function is called determines the value of this (runtime binding). This cannot be assigned during execution and the value of this will vary each time the function is called. ES5 introduced the bind method to set the this value of functions

In a global environment this refers to a global object, whether in strict mode or not

console.log(this===window); // return true a=37; console.log(window.a); // return 37 this.b="MDN"; console.log(window.b); // return MDN console.log(b); //"MDN"Copy the code

Inside a function, the value of this depends on how the function is called

function f1(){ return this; } conosole.log(f1()===window); / / return trueCopy the code

However, in strict mode, if the value of this is not set when entering the execution environment, this will remain undefined

function f2(){ "use strict"; return this } console.log(f2()===undefined); / / return trueCopy the code

The bind method

function f(){ return this.a; } var g=f.bind(a:"JackMa"); console.log(g()); var h=g.bind(a:"MarkJie"); console.log(h()); Var o={a:37,f:f,g:g,h:h}; console.log(o.a,o.f(),o.g(),o.h()); // return 37 37 JackMa JackMaCopy the code

When a function is called as a method in an object, this is set to the object on which the function is called. In the following example, when o.f() is called, the this inside the function is bound to the O object

var o={ prop:37, f:function(){ return this.prop; } } console.log(o.f()); / / return to 37Copy the code

This in the prototype chain

The same concept applies to methods defined somewhere along the object prototype chain. If the method exists on an object’s prototype chain, then this refers to the object on which the method was called, as if the method were on that object.

var o={ f:function(){ return this.a+this.b; } } var p=Object.create(o); p.a=1; p.b=5; console.log(p.f()); Var s=new Object(o); s.a=20; s.b=5; console.log(s.f()); // return 25, where this.a is s.aCopy the code

Sample1 the method on which the object is called, and this in the method refers to that object

window.color="red"; let o={ color:"blue"; } let s={ color:"black"; } function sayColor(){ return this.color; } console.log(this.sayColor()); // Return red this to window o.saycolor =sayColor; console.log(o.sayColor()); // Return blue this to o s.saycolor =sayColor; console.log(s.sayColor()); // Return black this to sCopy the code

10.10 Function Attributes and Methods

As mentioned earlier, functions in ECMAScript are objects and therefore have properties and methods. Each function has two attributes length and prototype, where the length attribute holds the number of named parameters defined by the function.

The prototype property

The Prototype property is the most interesting part of ECMAScript. Prototype is where all instance methods of a reference type are stored. This means that methods like toString() and valueOf() are actually stored on Prototype

Function also has two functions, one is apply () and call (), both of which specify this value to call the function.

The sample \ the apply () function

Let nums =,3,5,7,9 [1]; function sum(num1,num2){ return num1+num2; } function callSum1(num1,num2){ return sum.apply(this,arguments); } function callSum2(num1,num2){return sum. Apply (this,[num1,num2]); } the console. The log (callSum1 (10, 10)); // return 20 console.log(callSum2(100,200)); Function plu(num){let ret=0; for(let=0; i<num.length; i++){ ret+=num[i]; } return ret; } nums.push(55); function callSum3(num){ return plu.apply(this,arguments); } function callSum4(num){ return plu.apply(this,[num]); } console.log(callSum3(nums)); // return 80 console.log(callSum4(nums)); // return 80 console.log(math.max. apply(null,nums)); // return 55 console.log(math.min. apply(null,nums)); // Return 1 console.log(plu.apply(null,[nums])); / / back to 80Copy the code

[nums] apply(this,[nums]) [nums] is an array of arguments

The real power of apply() and call() isn’t passing parameters to functions. Instead, it controls the context of the function call, the this function function

Sample controls the parameter invocation of the function

window.color="red"; let p={ color:"pink", } let b={ color:'black' } function sayColor(){ return this.color; } sayColor(); // Return red saycolor.call (this); // Return red saycolor.call (window); // Return red saycolor.call (p); // Return pink saycolor.call (b); / / back to blackCopy the code

The bind method

The bind() method creates a new function, and when bind() is called, this of the new function is specified as the first argument to bind(), and the remaining arguments are called as arguments to the new function.

const test={ name:"JackMa", getName:function(){ return this.name; } } const notGetX=test.getName; console.log(notGetX()); // return undefined const GetX= notgetx.bind (test); console.log(GetX()); / / return 42Copy the code

The simplest use of bind() is to create a function that has the same value of this no matter how it is called. A common mistake made by JavaScript novices is to take a method out of an object and then call it again. Expect this in the method to be the same object. If no special treatment is done, it will be lost

10.11 Function expressions

Function expressions include Function declarations and Function expressions MDN: Functions are first-class citizens in JS. They have properties and methods like other objects. In short, functions are instances of Function objects

Sample is opened in FireFox

let fun=function(x,y){ return x+y; } console.log(fun.constructor); // Fun's constructor points to the fun constructor and returns FunctionCopy the code

Parameters and arguments

The function definitions

Grammar:

	function FUNC([parms,[parms]]){statements};
Copy the code

FUNC function name, parms parameter, statements Statements that form the function body

Functional expression