This detailed analysis of this and the JavaScript function ES6 arrow

Article Directory

This common

  1. If used alone, this represents a global object.
  2. In function, this represents a global object.
  3. In the function, in the strict mode, the this is undefined (undefined).
    Here Insert Picture Description
  4. In the method, this method indicates that the object belongs.
  5. In the event, this represents an element receiving the event.
    Here Insert Picture Description
  6. Similar call (), apply (), bind () refer to this method may be any object.
			var name = "我是window";
			// 单独使用
			console.log(this.name);			//我是window
			
			// 在函数中
			function myFunction() {
				name: "我是myFunction",
				console.log(this.name);		//我是window
			}
			myFunction();
			
			//对象中有自己声明的量
			var myObj1 = {
				name: "我是obj1",
				myfun1: function() {
					console.log(this.name);		//我是我是obj1
				}
			};
			myObj1.myfun1();
			
			//对象的this
			var myObj2 = {
				name: this.name,
				myfun2: function() {
					console.log(this.name);	//我是window
				}
			}
			myObj2.myfun2();
			//使用call apply bind
			myObj2.myfun2.apply(myObj1);	//我是我是obj1
			myObj2.myfun2.call(myObj1);		//我是我是obj1
			myObj2.myfun2.bind(myObj1)();	//我是我是obj1

Arrow function

函数名 = () => {函数体}

  • No more than one parameter or parameters must be written when ()only one parameter can not write
    Here Insert Picture Description
  • The function body is only one statement, you can not {}, return to the default result; the function body had multiple statements, need {}, need to return if value is to manually write return.
    Here Insert Picture Description

Usage scenarios: Multi-defined callback function used to
draw the focus: arrow function does not own this, when this is not the function of the arrow called the decision, but when defined in this object is its
ordinary functions, whom to call this It points to anyone.
Here Insert Picture Description
This function of the arrow to see if there is a function of the outer layer,

  • If there is, this is a function of the arrows inside of this outer function,
  • If not, then this is the window.

Three examples below include:
FIG 1

  • Directly define the function arrow function fun, fun point of this window,
  • The fun as a method of object obj, fun is this still points to window,
  • In both fun define a function get, get an external did not function, it still points to window
    Here Insert Picture Description

In FIG 2

  • Defined outside the function arrow fun, fun pointer to window
  • As a method call in the demo function in fun, since fun is defined externally, so fun still pointed window
  • In the demo function is defined inside arrow function get, get the outer function is fun, so get a pointer to the same demo, the demo call object obj, demo pointer to obj, thus also fun pointer pointing obj.
    Here Insert Picture Description

FIG. 3

  • Demo1 function and normal function of the arrow demo2 methods are obj
  • Arrow function get1 outer demo1 function is a normal function, this pointer demo1 determined by the object's call it, so obj demo1 point, and this pointer get1 same function and the outer layer, so that this pointer also points to obj get1
  • Arrow function is a function get2 arrow outer demo2 function, this pointer demo2 determined by its outer function, but not the outer demo2 function, thus pointing window, and this pointer get2 same function and the outer layer, this is so get2 point window
    Here Insert Picture Description
Published 131 original articles · won praise 451 · views 540 000 +

Guess you like

Origin blog.csdn.net/qq_36667170/article/details/105036900