es6 class与es5 构造函数

114 阅读3分钟

整理自己思路的笔记,会的就删,没掌握牢的先留着

声明

function Point(x,y){
    this.x=x;
    this.y=y;
    this.toString=function(){
        return `(${this.x},${this.y})`
    }
}
let p= new Point(1,2)

class Point{
    constructor(x,y){
        this.x=x;
        this.y=y;
    }
    toString(){
        return `(${this.x},${this.y})`
    }
}
let p= new Point(1,2)

私有变量 和 私有属性

function Test(){
  var color = "blue";//私有变量
  var fn = function(){} //私有函数
}
    
class Foo {
  #a; //私有变量
  #b; //私有变量
  constructor(a, b) {
    this.#a = a;
    this.#b = b;
  }
  #sum() { //私有函数
    return this.#a + this.#b;
  }
  printSum() { 
    console.log(this.#sum());
  }
}

静态变量 和 静态属性

function Obj(){}
Obj.num = 72;//静态变量
Obj.fn = function(){}  //静态函数

class FakeMath {
  static PI = 22 / 7;
  static #totallyRandomNumber = 4;

  static #computeRandomNumber() {
    return FakeMath.#totallyRandomNumber;
  }

  static random() {
    console.log('I heard you like random numbers…')
    return FakeMath.#computeRandomNumber();
  }
}

react 常年让人搞不懂的东西

export function defaultToString(item) {
  let typeName = Object.prototype.toString.call(item);
  let obj = {
    "[object Null]": "NULL",
    "[object Undefined]": "UNDEFINED",
    "[[object String]": "NULL",
    "[object Function]": "NULL",
  };
  return obj[typeName] ? obj[typeName] : item.toString();
}

// 字典类和集合的区别,字典类是【键,值】集合是【值,值】
// 字典
export class Dictionary {
  constructor(toStrFn = defaultToString) {
    this.toStrFn = toStrFn;
    this.table = { name: "xuziling" };
  }
}

Class 定义的属性在prototype(原型)上 构造函数的是放在构造函数的,类似于自带的属性 constructor 差不多,也是有差异 class 类的属性和方法,除非显式定义在其本身(即定义在this对象上),否则都是定义在原型上(即定义在class上)

判断方法是自带的,还是继承于原型,用方法 hasOwnProperty

function Point1(){
	this.toString=function(){}
	this.toValue=function(){}
}
let p1=new Point1();

class Point2 {
	constructor(){}
	toString(){}
	toValue(){}
}
let p2=new Point2()

问题一 在浏览器中打印不出来 prototype

比如 p1.prototype 报undefined 
p1._proto_是有值的

构造函数有原型,实例没有
class有 实例没有
实例要取,浏览器有 _proto_


`__proto__`prototype
`__proto__`是实例的属性,prototype是构造函数的属性
只有函数才有prototype属性并可以访问到,
实例的`__proto__` 和原型的prototype 指向的是同一个东西
原型有一个 constructor 指向 构造函数

react常见问题

实例的方法中的this 指向实例,如果该方法没有被实例调用 如
const logger =new Logger()
let {printName}=logger

priName 在被调用时,它的this指向的是当前环境

锁死this的方法是 在定义时,标明 this.printName=this.printName.bind(this)

## 箭头函数内部的this总是指向定义时所在的对象

继承

class Point {}

class ColorPoint extends Point {
	constructor(x,y,color){
		super(x,y)
		this.color=color;
	}
	toString(){
		return this.color+'' +super.toString()
	}
}

super 代表的是父类构造函数
ES6 规定,子类必须在constructor()方法中调用super()。
ES6 的继承机制,则是先将父类的属性和方法,加到一个空的对象上面,然后再将该对象作为子类的实例,即“继承在前,实例在后”。这就是为什么 ES6 的继承必须先调用super()方法,因为这一步会生成一个继承父类的this对象,没有这一步就无法继承父类。
this调用必在super之后



除私有变量 私有方法外,其它父类 方法,属性均可被继承

有助理解

对象和数组的创建就是构造函数
new Object();
new Array(2,3);

实际项目中能用到的场景

配置相关的东西最好写成构造函数,类似的还有要防止浅拷贝会带来影响的数据内容
见到最多的是 请求方法封装

Object.create

用于创建一个新对象,使用现有的对象来作为新创建对象的原型(prototype)。
新对象的原型就是调用 create 方法时传入的第一个参数:

// es5继承写法
function Box(){             //被继承的函数叫做超类型(父类,基类)
	this.name = "Jack";
}
function Tree(){          //继承的函数叫做子类型(子类,派生类)
	this.age = 300;
}
Tree.prototype = new Box();//Tree继承了Box,通过原型,形成链条
var tree = new Tree();
console.log(tree.name);//弹出 Jack

let tree2 = Object.create(tree) // tree2.__proto__ === Box

New 的 效果 作用

var o = new Foo();
等同于
var o = new Object();
o.__proto__ = Foo.prototype;
Foo.call(o);