javascript-Read you Dont Know js,this what exactly is

Source: Internet
Author: User

Front-end Technology update soon, a few months ago I was still writing react, and now someone suggested I learn vue. After thinking, I decided to sink my mind to fill the JavaScript base. You Dont Know js a series of books good. This series of blogs is the dry goods I summarize after reading this book.

Why to use this

Know the habit is to ask what is the first, and then ask why, to this blog but to turn over to say. If there is no scene to use this, then we don't need to know what this is.
Take a look at the following example:

// 使用this的动机function tellName(){    console.log(‘name is‘this.name);}let personOne = {    ‘Claire‘}let personTwo = {    ‘LYY‘}tellName.call(personOne);tellName.call(personTwo);

Console Print Results:

From this the above use can be found, we write code often want a function in different environment behavior style consistent but specific performance is not the same, that is, using the same name variable under the current Environment "processing" of the same operation, the variable value is different but the "processing" process is the same. Of course, you can choose to pass this "environment" as a parameter into the function, but this it is a more elegant choice.

How to determine this for this function call

We now know that it this is something that is related to the calling environment, but many times we still don't know how to be sure this . Before you explain how to determine this call this , make certain the following points.

    • thisIt is not bound at the time of writing, but is bound by the runtime, which relies on the context condition of the function call, that is, regardless of the this location of the function declaration, but rather the way the function is called.
    • When a function is called, an activity record is created, called the execution environment. This record contains information about where the function was called from (Call-stack, call stack), how the function was called, what parameters were passed, and which included references that would be used during function execution. this
Do you know what this function prints?

Here is an example of using this:

// 通用例子function foo(num){    console.log(‘foo: ‘ + num);    //尝试追踪foo被调用的次数    this0;var i;for(i=0; i<10; i++){    if5){        foo(i);    }}console.log(‘The times foo is called: ‘, foo.count);

The following is a guide to determining this the rules.

Default Binding

A completely independent function (neither a constructor nor an object method, directly declared by the function keyword), is ‘use strict‘ bound to the top in the mode this undefined , not strict mode this window . For a small example:

function findThis(){  console.log(this);}findThis();

Printing results:

"use strict";function findThis(){  console.log(this);}findThis();

Printing results:

Now we can analyze what the common example in the previous section printed. The previous example uses the function declaration directly and applies the default binding rule in two cases:

    • Strict mode, foo in the case this undefined , the program will error, after all, undefined can not perform ++ operations
    • In the case of non-strict mode, the variable is not declared, it is foo this window window count automatically assigned window.count = NaN , the program can execute, but the ++ operation is window.count not foo.count , so the print result is 0, see

If you foo change the middle, this.count++ foo.count++ you can print out 4.

Implicit Binding

Implicit binding: If the function is called, does the function have an Environment object (context objects).
To understand this, you first need to know when the function is called, which involves two concepts-the call point (Call-site) and the call stack (call-stack). The call point refers to the location where the function is called in the code (not the declared location). The call stack directs us to the stack of all methods that are called when we reach the current execution position. The original cited the following example:

 function baz() {    //Call-stack is: ' Baz '    /So, our call-site are in the global scopeConsole.log ("Baz"); Bar ();//<--call-site for ' bar '} function bar() {    //Call-stack is: ' Baz ', ' Bar '    /So, our call-site are in ' Baz 'Console.log ("Bar"); Foo ();//<--call-site for ' foo '} function foo() {    //Call-stack is: ' foo ', ' Baz ', ' Bar '    /So, our call-site are in ' bar 'Console.log ("foo");} Baz ();//<--call-site for ' Baz '

It is easy to understand that in complex cases it may be difficult to manually parse the call point and the call stack with the help of Debug.

Implicit binding: If the function is called, does the function have an Environment object (context objects). The calling function here is the function's call point.
Look at the following code:

function findThis(){    console.log(this.name);}var‘window‘;var context = {    ‘context‘,    //context

However, please be aware of the following two scenarios:

    • Chained calls
function findThis(){    console.log(this.name);}var‘window‘;var contextOne = {    ‘one‘,    findThis: findThis};var contextTwo = {    ‘two‘,    context: contextOne}//仅离函数最近的对象为其调用环境//one
    • The function assigns a value to the variable
function findThis(){    console.log(this.name);}var‘window‘;var contextOne = {    ‘one‘,    findThis: findThis};var newFindThis = contextOne.findThis;//赋值以后调用环境丢失,降级为default binding//window
Explicit Binding

To avoid the loss of the calling environment, it is often explicitly bound. You can use it, call apply bind or write a tool function yourself. bindThe call apply difference is that when you define a function, you bind it, and you bind it when you call it, so it's less bind this call apply this bind likely to be changed, called hard binding in the book, It is a variant of the explicit binding.

In addition, the above functions are implicitly used in some APIs, such as:

var context = {    ‘context‘};[123].map(function(item){this.name)}, context);

Printing results:

New Binding

The constructor in JavaScript is a normal function. The constructor is called when a function is called with new. The new call automatically completes the following tasks:

    • A whole new object will be created (or built) in thin air.
    • This newly constructed object will be connected to the prototype chain ([[prototype]]-linked]
    • This newly constructed object is set to the this binding of the function call
    • Unless the function returns a different object of its own, the function called by new will automatically return the newly constructed object
function Person(name){    thisfunction(){        console.log(name);    };}varnew Person(‘lyy‘//lyy
Priority level

When a call meets more than four rules, it is determined by the following priority levels this :

    • Called by new? Use the newly built object.
    • Called by call or apply (or bind)? Uses the specified object.
    • Called by the Environment object that holds the call? Use that Environment object.
    • Default: Strict mode is undefined, otherwise it is the global object.

javascript-Read you Dont Know js,this what exactly is

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.