This is the sixth day of my participation in Gwen Challenge

Preface 🎡

Recently in the review and update JS small knowledge points, recorded some practical high or very basic very important knowledge points to share with you. I hope you can support me.

5. What is this? ⚾

1. Why use this

It’s about making your writing more elegant and intuitive, just like Promise, and when we talk about this, we’re talking about JS implementation.

function test(num) {
this.conut++;
console.log( "test: " + num );
}
test.count = 0;
var i;
for (i=0; i<10; i++) {
if (i > 5) { test( i ); }}console.log( test.count )// The result is 0
// In the above example, this does not refer to the function foo, but to window
Copy the code

2. Understand this

First, change the stereotype: this refers to the function itself or the lexical scope of the function, which is a misconception. ❌

🐱👓 True answer: : This is bound at run time, not at write time, and the direction of this depends on how the function is called.

3. This uses reflection

🙄 : During the interview, the interviewer will ask how to change the direction of this. Can I write it by hand? We answered, but we didn’t pay attention to it during development, and instead chose the familiar “lexical scope” to solve the problem.

4. This extension

Extension: The way this is bound (a function call changes the method this points to) :

1. Default binding: Determine the location of the call by analyzing the call stack (usually most development, you can use the debugging tool of the browser to interrupt, or you can analyze by yourself)

function test() {
console.log( this.num );
}
function test1(){
this.num = 2;
test();// Call location: test1
}
var num = 1;
test();// Call location: global 1
test1();/ / 2
Copy the code

2. Implicit binding

function test() {
console.log( this.num );
}
var test1 = {
num:2.test:test
}
var num = 1;
test1.test();/ / 2
Copy the code

3. Explicit binding: : call/apply/bind

4. New binding reference “100 JS small knowledge points” series (1) quickly learn the fourth question

Priorities: 4,3,2,1 (write your own sample to test)

6, copy object js object depth copy ⚾

Replication objects can be shallow or deep.

Shallow copy

For the first layer of an object, the underlying type is the copied value, and for the object type, the reference is copied. (This happens when you modify an object

  • es6 Object.assign()
function run() { 
    console.log(run);
 }
var ren = {name:'the wuling'}
var obj  = {
    a: 1.b: run,
    c: ren
}
var obj1 = Object.assign(obj)
obj1.c.name = 'wuling'// Change the new object
console.log(obj.c.name);// Old objects also become wuling
Copy the code

Deep copy

Copy all the data of the object again, and store it, modify the new object, do not affect the old object

Implementation method:

  • Json.parse (json.stringify ())
  • Deep copy for handwritten recursive objects (pay attention to details)

7. Is an attribute descriptor. How to modify it?

The property descriptors of ES5 are different, and the common object property descriptors are value, Enumertable,writable, get, and set, freely configurable and different.

If configurable, use Object.defineProperty as follows

var ren = {name:'the wuling'}
Object.defineProperty(ren,'name', {writable:false})
ren.name = 'wuling'
console.log(ren) //{name: "wu Ling "}
Copy the code

Let’s call it a day. 👋

Resources 📕

JavaScript You Don’t Know

Welcome to follow the author Wu Ling 🥇

Personal blog | making – the wuling

Vue. Js API sorting

Simple implementation of vUE several processes