“This is the first day of my participation in the First Challenge 2022. For details: First Challenge 2022”

What is context

What is context? Give me an example.

Talk about where my hometown is, if your context is in the international speaking arena. You must say my hometown is in China.

What if my hometown is in China? Which province or municipality is my hometown?

That’s the context.

What is this

This is a context provided by Javascript

In javascript every function is an object, so var temp=this refers to the current object of function. This is a keyword in the Javascript language. It represents an internal object that is automatically generated while the function is running and can only be used inside the function.

When a function executes, this always refers to the object on which the function was called. To determine what this refers to, we need to determine which function this belongs to.

This points to the

  • Always pointing to objects
  • Pointing depends on where the call is made

In ordinary functions

If a function does not belong to any object, the context is a global object.

Window in the browser, global in the Node runtime

Function say() {console.log(" mY hometown ", this.name); } name = "Chinese "; say(); // My hometown is in ChinaCopy the code

As long as you don’t apply the new object, no matter how many functions you apply as long as there’s no upper object it’s going to point to the global.

Function f2() {console.log(this)} f2()} f1() function f2() {console.log(this)} f2()} f1()Copy the code

Another thing to remember is that in the Dom event callback, this refers to the binding event object.

<html>
    <button id='1'>1</button>
    <button id='2'>2</button>
    <script>
        function fn() {
            console.log(this)
        }
        document.getElementById('1').addEventListener('click',fn)
        document.getElementById('2').addEventListener('click',fn)
    </script>
​
</html>
Copy the code

Object properties

Now, let’s talk a little bit more about what this points to in the object. This points to an object instance within an object. In fact, belonging to an object is the most used context. The same method can vary depending on the data members in the object instance.

  • My hometown is in Beijing
Function say() {console.log(" mY ", this.name); } var bj = {name: "Beijing", say: () = > say (), chaoyang: {name: "chaoyang", "say,},}; bj.say(); // My hometown is bj. // My hometown is chaoyangCopy the code

Constructor and Class

A class is an instance of an object and can be thought of as a template for the instance.

Let’s say a country template, let’s say a country like China.

The say method in the country template refers to the object created by China

Function say() {console.log(" mY hometown :", this.name); } function Country(name) {this.name = name} country.prototype. Say = say const China = new Country(' China ') china.say()Copy the code

Using the class keyword in ES6, the constructor is the same as the Country constructor above

Class Country {constructor(name) {this.name = name} say() {console.log(" mY hometown :", this.name); }} const China = new Country(' China ') china.say()Copy the code

Call, apply, and bind methods

Finally, three functions that can bind context.

There are no usage differences between apply, call or bind, just API parameters.

Function say() {console.log(' mY home :' + this.name)} window.name = 'China' say() say.apply({name :' Beijing '}) say.call({name :' Beijing '}) }) var mySay = say.bind({name: 'say.bind '}) mySay()Copy the code

In strict mode this

The “use strict” directive is new in JavaScript 1.8.5 (ECMAScript5).

It is not a statement, but a literal expression that is ignored in older versions of JavaScript.

The purpose of “use strict” is to specify that the code should be executed under strict conditions.

You cannot use undeclared variables in strict mode.

The strict mode itself is designed to eliminate some of the irrationality in Javascript.

  • Eliminate some unsafe code operation, to ensure the safety of code operation;
  • Improve the efficiency of the compiler, increase the running speed;
  • Set the stage for future versions of Javascript.

The “this” direction in strict mode also changes somewhat.

The function outside points to the window

"use strict"
console.log(this) // window
function foo() {
  console.log(this) // undefined
}
foo()
Copy the code

The function is undefined

function func() { "use strict" console.log(this); } func(); // The output is undefinedCopy the code

Arrow function

In arrow functions, this always points to the lexical scope, that is, the outer caller. Not the object of the method.

For example, the following method caller is a global object, so the context also points to the global.

Function say() {console.log(" mY hometown is in "+this.name); } var bj = {name: "Beijing", say: () = > say (), chaoyang: {name: "chaoyang", "say: () = > say (), / / modify as the arrow function},}; Name = 'Chinese' bj. Say (); // My hometown is bj. // My hometown is in ChinaCopy the code

The interview guide

This is a basic question, as long as the answer is organized on the line.

The first is the effect of functions, objects, constructors, and strict schema and arrow functions on this pointing.

365 days of clocking

🔥 creation is not easy, we help uncle B stack of a key three

  • How to use closures to complete library encapsulation 📺 Billbill video 📚 Gold Digging Manuscript 🐱 Github
  • [Talk about closures and real-time functions] 📺 Billbill video 📚 Nugget manuscript 🐱 Github
  • 📺 Billbill video 📚 Digger manuscript 🐱 Github
  • The relationship between closures and curated, partial application functions 📺 Billbill video 📚 Denver Manuscript 🐱 Github
  • How to make lazy functions with closures? 📺 Billbill video 📚 Nuggets Script 🐱 Github
  • What is a closure and how to create one? 📺 Billbill video 📚 Nuggets Manuscript 🐱 Github
  • [new a constructor if the function returnsreturn {} 、 return null ， return 1 ， return trueWhat happens? ]📺 Billbill video📚 Gold digging manuscript🐱 making
  • What happens to a new function? 📺 Billbill video 📚 Nuggets Script 🐱 Github
  • What are the ways to determine data types? 📺 Billbill video 📚 Nuggets Script 🐱 Github
  • [How much storage space does Number() have? What if the background sends a Number that exceeds the maximum limit?] 📺 Billbill video 📚 Nuggets Script 🐱 Github
  • [0.1 + 0.2 === 0.3? Why? How to solve?] 📺 Billbill video 📚 Nuggets Script 🐱 Github
  • How are JS integers represented? 📺 Billbill video 📚 Nuggets transcript [🐱 Github]