Re-learn the front - study notes -JavaScript objects - class

Explanation

Cheng Shao re-learn front-end non (winter) in a column open geeks time, this major finishing my study notes. If infringement, please contact me, thank you.

The prototype js

If all objects have a private field [[prototype]], it is the object's prototype
Reading an attribute not found on the object, it will go on to find its prototype, the prototype is empty or until you find the date

js providing built-in functions to access and manipulate prototypes

Object.create: to create a new object with the specified prototype, the prototype can be null
Object.getPropertyOf: Get Object prototype
Object.setPropertyOf: set the object's prototype

var cat = {
    say(){
        console.log("meow~");
    },
    jump(){
        console.log("jump");
    }
}

var tiger = Object.create(cat,  {
    say:{
        writable:true,
        configurable:true,
        enumerable:true,
        value:function(){
            console.log("roar!");
        }
    }
})


var anotherCat = Object.create(cat);

anotherCat.say();

var anotherTiger = Object.create(tiger);

anotherTiger.say();

复制代码

Early versions of the prototype class

(To be added)

new operation

The new operator a constructor and a set of parameters actually doing these three things

To the prototype property of the constructor's prototype, create a new object
And say this argument to the constructor, execution
If the constructor returns the object is returned, if not, it returns the object created in Step

Let the new operator with the class function objects similar in syntax, but it provides two ways, one is to add attributes in the constructor, it is to add properties via the prototype property of the constructor

// 通过构造器
function c1(){
    this.p1 = 1;
    this.p2 = function(){
        console.log(this.p1);
    }
} 
var o1 = new c1;
o1.p2();


// 通过构造器的原型
function c2(){
}
c2.prototype.p1 = 1;
c2.prototype.p2 = function(){
    console.log(this.p1);
}

var o2 = new c2;
o2.p2();

复制代码

Use to implement a new Object. create incomplete polyfill

Object.create = function(prototype){
    var cls = function(){}
    cls.prototype = prototype;
    return new cls;
}
复制代码

This creates an empty class as a function of the first parameter, and the incoming prototype of the prototype hanging it, and finally creates an instance of it, according to the new behavior, which will result in an incoming object prototypes.

ES6 in class

Basic writing class

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}

复制代码

To create getter by get / set, by means of brackets and braces to create a method, data type members wrote in the constructor.

Class provides the ability to inherit

class Animal { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name); // call the super class constructor and pass in the name parameter
  }

  speak() {
    console.log(this.name + ' barks.');
  }
}

let d = new Dog('Mitzie');
d.speak(); // Mitzie barks.

复制代码

Compared to early prototypes analog mode, use the extends keyword is automatically set constructor, and will automatically call the constructor of the parent class, which is a less pit design.

Reproduced in: https: //juejin.im/post/5d0ba47de51d454fbf540a15