proxy

  • Proxies, which help us with things like data processing and validation, add a layer of interception before accessing objects. The basic syntax let p = new Proxy(target, handler), the first parameter is the target object to be wrapped with Proxy(can be any type of object), the second parameter is an object whose properties are the Proxy behavior function defined when an operation is performed. To put it bluntly, proxy is equivalent to a star’s agent. Generally, we can’t directly contact the star. If we want to invite the star to appear, we have to go through the agent.

    let rapStar = { name: 'jiangyunsheng', age: 24, phone: 19888888888} let agent = new Proxy(rapStar, {// Key){if(key === 'phone'){return 'agent: 1383838438'; return 'agent: 1383838438'; } if(key === 'price'){// If (key === 'price'){return 300000; } return target[key]; // Set (target, key, value) {// Set (target, key, value) { If (value < 200000){throw new Error(' too low '); }else{ target[key] = value; return true; }}, // Can intercept the in operator, but can not intercept for in loop has (targer, key) {console.log(' please contact broker for details: 1383838438') if (key === 'customerPrice'){ return true; }else{ return false } } }) console.log(agent.name); // -> jiangyunsheng console.log(agent.phone); // -> agent: 1383838438 console.log(agent.price); // -> 300000 agent.customerPrice = 250000; // -> here we quote 250000 console.log(agent.customerprice); Console. log('customerPrice' in agent); // -> true and print details please contact broker: 1383838438Copy the code

  • This is just the most basic application, the rest you can explore, are the same usage.

class

  • Javascript is an object-oriented language based on prototypes, with only objects but no classes. The stereotype object is characterized by sharing its properties with new instantiated objects. If we want to generate an instance object, we need to define a constructor and then complete the instance with the new operator.

    function Person (name, age) { this.name = name; this.age = age; } Person.prototype.say = function () { return 'My name is ' + this.name; } var p = new Person('zhangsan', 22); console.log(p); // -> < p style = "box-sizing: border-box! Important; // -> My name is zhangsanCopy the code

       

  • When a new constructor is created, it implicitly creates an object, assigns the scope of the constructor to the new object (this -> new object), and executes the code inside the constructor. If no value is returned, the new object is returned by default.

  • ES6 introduces the concept of a class, which is a syntactic sugar for constructors. Do not put commas between methods.

    Class Person {constructor (name = 'zhangsan', age = 22) {constructor (name = 'zhangsan', age = 22) {this.name = name; this.age = age; Say () {console.log(' My name is ${this.name}, ${this.age} years old. ')}} console.log(new Person);  Let p = new Person; p.say(); // -> My name is zhangsan, 22 years old.Copy the code

       

  • The minor difference between the two is that methods on class stereotypes are not enumerable.

    function RapStar1 (name) { this.name = name; } RapStar1. Prototype. Sing = function () {the console. The log (` ${this. The name} : black and blue will never fall in the most hard long march `); } // You can also add object. assign(rapstar1.prototype, {drink () {console.log(' a case of beer ')}}) console.log(object.keys (rapstar1.prototype)); // -> ["sing", "drink"] class RapStar2 { constructor (name) { this.name = name; } sing () { console.log(`${this.name}: I just called to tell you drive safe`); } drink () { console.log('whisky'); } } console.log(Object.keys(RapStar2.prototype)); / / - > []Copy the code

  • When we do not define constructor, we do not get an error but default to define one, which can only be executed using new.

    class Person {

}
console.log(new Person);
Person(); // -> TypeError: Class constructor Person cannot be invoked without 'new'
Copy the code

       

  • There is no variable promotion (TDZ) for class. It must be defined before it is used. Constructors can be used before definition.

    new C(); // -> ReferenceError: C is not defined
class C {

}

new B(); // -> B {}
function B () {
}
Copy the code

  • Static: Adds new properties/methods to the constructor. Strict mode is enabled by default.

    class Person {
  static a = 3;
  static say () {
    console.log('hhh');
  }
}
console.log(Person.a); // ->  3
console.log(Person.say()); // -> hhh
Copy the code

  • To implement inheritance using the extends keyword, a subclass must call a super method from its constructor method, otherwise it will get an error when creating a new instance. This is because the subclass does not have its own this object. Instead, it inherits this from its parent class and processes it. Subclasses don’t get this object.

    class Father {
  constructor (name= 'foo', money = 100) {
    this.name = name;
    this.money = money;
  }
  say () {
     console.log('hello');
  }
}

class Son extends Father {
  constructor (name = 'bar') {
    super(name);
  }
}
console.log(new Father());
console.log(new Son());
Copy the code

                

  • Super is used within an object and can refer to the object’s prototype.

    let obj = { a: 1, say () { console.log(super.b); } } let proto = { b: 2, c: 3 } Object.setPrototypeOf(obj, proto); obj.say(); / / - > 2Copy the code

conclusion

  1. class 与 Let, constThere are also TDZ (temporary dead zones)
  2. Public attributes are not enumerable
  3. Internal strict mode is default
  4. Will generate by defaultconstructor
  5. Only throughnewperform

 ————————————- END ————————————-