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.
this
It 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:
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. bind
The 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