This is my 18th day of the Genwen Challenge

Special objects in.js:

First, we will look at the following special objects in js:

1. This object:

This article will talk about the object, relatively special, use different environment, it points to different.

2. Window object:

The Window object represents the Window open in the browser.

In the client browser, the Window object is the interface to access the BOM, such as referencing the Document property of the Document object, referencing its own window and self property, etc. Windows also provides global scope for client-side JavaScript.

The Window object represents a browser Window or a frame. In client-side JavaScript, the Window object is a global object, and all expressions are evaluated in the current environment. That is, no special syntax is required to refer to the current window, and properties of that window can be used as global variables. For example, you can just write document instead of window.document.

3. The arguments object:

Arguments is an array-like object corresponding to the arguments passed to the function.

Arguments objects are local variables available in all (non-arrow) functions. You can use arguments objects to refer to function arguments in functions.

This refers to the problem:

1. Event function:

Event Handlers are functions that are called in response to an event. Like click events, keyboard events. This refers to the event element itself.

For example, there is a button click event:

<body>
    <button id="btn"></button>
    <script>
        var btn = document.querySelector('#btn');
        // Click the event
        btn.addEventListener('click'.function(){
            console.log(this);
            console.log(btn);
            console.log(this === btn);
        })
        
    </script>
</body>
Copy the code

Let’s look at the output, what does this correspond to BTN, and whether they are equal:

You can see that this refers to the event element itself.

2. Global functions:

In a global object, this points to the global by default.

Such as:

 <script>
        function night(){
            console.log(this);
            console.log(this= = =window);
        }
        // See, it is now referenced by window.
        night();
    </script>
Copy the code

The result shows that it is global:

Of course, this is only the default if it is referenced by a named functionPoint to the reference itself.

Such as:

<button id="btn"></button>
<script>
        var btn = document.querySelector('#btn');
        function night(){
            console.log(this);
            console.log(this= = =window);
        }
        // It is referenced by the button
        btn.onclick = night;
    </script>
Copy the code

We can see that this refers to the BTN button:

3. The object:

This refers to the object that calls the function.

 <script>
        function night(){
            return this;
        }
        // Create an object
        var obj = {};
        // Set the property printThis to the object and call night
        obj.printThis = night;        
    </script>
Copy the code

The night function refers to the object obj:

4. Constructor:

This in the constructor refers to the object instantiated by the constructor.

 <script>
        // Define a constructor
     function People(name,age){
         this.name = name;
         this.age = age;
         this.say = function(){
             return "Hello world !"
         }
         this.printThis = function(){
         / / return this
             return this; }}/ / instantiate
      var people = new People('Ming'.21);
    </script>
Copy the code

This refers to the instantiated People object.

5. Apply and call methods:

The Call () method is very similar to the apply () method in that both methods are used to change references to objects and can be written for different objects. The difference is that the arguments are passed, the first of which is the reference object to be changed, the other multiple arguments are a list of arguments separated by commas, and an array containing multiple arguments. Of course, not if you don’t need to pass parameters.

Obj2.printthis () must refer to its own name ‘joy’.

 <script>
      var obj = {
          name: 'sam'
      }
      var obj2 = {
          name:'joy'.printThis: function(){
              return this.name; }}console.log(obj2.printThis());
    </script>
Copy the code

Output result:

Change the printThis call on obj2 to obj by applying the apply method:

 <script>
      var obj = {
          name: 'sam'
      }
      var obj2 = {
          name:'joy'.printThis: function(){
              return this.name; }}// Use the apply method to change the call to printThis on obj2
      console.log(obj2.printThis.apply(obj));
    </script>
Copy the code

Results:

6. Arrow function

The arrow function this is static. This always points to the value of this in the scope in which the function was declared:

  / / global
      window.name = 'night';
      // In the object
      var peopel = {
          name:'sky'
      }
      // A normal function
      function getName1(){
          console.log(this.name);
      }
      // Arrow function
      let getName2 = () = >{
          console.log(this.name);
      }
      // call it separately
      getName1.call(peopel);
      getName2.call(peopel);
Copy the code

Running results:

Because of the call () method, we can see that getName1’s this reference has changed. It is no longer the global name, but the name in the People object. The arrow function getName2 has not changed, because it always points to the this value in the scope in which the function was declared.