JavaScriptThis's six Hurdles

In view of this cool way of operation, understanding this is a never-ending topic. this article attempts to pin this refined goblin by unloading six pieces of it. First, this isallaboutcontext. this...

In view of this cool way of operation, understanding this is a never-ending topic. this article attempts to pin this refined goblin by unloading six pieces of it.

First

This is all about context.

To put it bluntly, look for the daxie and find the context object that owns the current context ).

Daxie can be divided into six layers. The higher the layers, the larger the power, this will only recognize the largest.

Level 1: The end of the world

The greatest privilege is the existence of the slave, which is global in general, window in the browser, and undefined in the use strict case.

function showThis () {console.log(this)} function showStrictThis () {'use strict'console.log(this)} showThis() // windowshowStrictThis() // undefined

Level 2: dianshi chengjin

The second layer is the point before this function ..

If the function that uses this belongs to a context object, the context object is bound to this.

For example, in the following example, the boss is the context object of returnThis, or the returnThis belongs to the boss.

var boss = {name: 'boss',returnThis () {return this}} boss.returnThis() === boss // true

Please be careful in the following example. Can you come up with an answer?

var boss1 = {name: 'boss1',returnThis () {return this}} var boss2 = {name: 'boss2',returnThis () {return boss1.returnThis()}} var boss3 = {name: 'boss3',returnThis () {var returnThis = boss1.returnThisreturn returnThis()}} boss1.returnThis() // boss1boss2.returnThis() // ?boss3.returnThis() // ?

The answer is boss1 and window, right.

Just look at the function that uses this.

In boss2.returnThis, the function using this is boss1.returnThis, so this is bound to boss1;

In boss3.returnThis, the function that uses this is returnThis, so this is bound to the backup.

How can I bind this to boss2?

var boss1 = {name: 'boss1',returnThis () {return this}} var boss2 = {name: 'boss2',returnThis: boss1.returnThis} boss2.returnThis() //boss2

Yes, as long as the function that uses this belongs to boss2.

Third layer: Refers to marriage

The third layer is the Object. prototype. call and Object. prototype. apply. They can specify this through the parameter. (Note that this cannot be directly assigned. If this is set to 2, a ReferenceError is returned .)

function returnThis () {return this} var boss1 = { name: 'boss1' } returnThis() // windowreturnThis.call(boss1) // boss1returnThis.apply(boss1) // boss1

Layer 4: vows

The fourth layer is the Object. prototype. bind. It not only provides permanent binding through a new function, but also overwrites the layer-3 commands.

function returnThis () {return this} var boss1 = { name: 'boss1'} var boss1returnThis = returnThis.bind(boss1) boss1returnThis() // boss1 var boss2 = { name: 'boss2' }boss1returnThis.call(boss2) // still boss1

Layer 5: Qian Kun

A place that is easy to ignore and will bind this is new. When we create a new function, this is automatically bound to the new object and then called. It will overwrite the bind binding.

function showThis () {console.log(this)} showThis() // windownew showThis() // showThis var boss1 = { name: 'boss1' }showThis.call(boss1) // boss1new showThis.call(boss1) // TypeError var boss1showThis = showThis.bind(boss1)boss1showThis() // boss1new boss1showThis() // showThis

Layer 6: Military Commands

The last powerful hacker is ES2015's arrow function. This in the arrow function is no longer glamorous. It is always enclosed in the current Lexical scope, called Lexical this. It can be determined before the code is run. There are no other bosses to cover.

This makes it easy for the callback function to use the current scope and avoid confusion.

So for the arrow function, you only need to see where it is created.

If you are interested in the lexical scopes implemented by V8, you can refer to here.

function callback (cb) {cb()} callback(() => { console.log(this) }) // window var boss1 = {name: 'boss1',callback: callback,callback2 () {callback(() => { console.log(this) })}} boss1.callback(() => { console.log(this) }) // still windowboss1.callback2(() => { console.log(this) }) // boss1

Note the following usage methods:

var returnThis = () => this returnThis() // windownew returnThis() // TypeError var boss1 = {name: 'boss1',returnThis () {var func = () => thisreturn func()}} returnThis.call(boss1) // still window var boss1returnThis = returnThis.bind(boss1)boss1returnThis() // still window boss1.returnThis() // boss1 var boss2 = {name: 'boss2',returnThis: boss1.returnThis} boss2.returnThis() // boss2

If you do not know why boss2 is used at the end, continue to understand the sentence "for arrow functions, just check where it is created.

The above is the six-way content of JavaScript This. For more information, see the PHP Chinese website (www.php1.cn )!