ES6Class_JavaScript_移动技术网

ES6Class

JavaScript中，要生成对象实例，传统方法是使用构造函数；ES6提供了Class,通过Class关键字，就可以定义类；使用Class定义的类的大部分功能，ES5都可以做到；所以Class定义的类，只是让原型的写法更加清晰易懂，更加符合面向对象编程的语法；

举个栗子：

//ES5的写法
function Home(name , age) {
	this.name = name;
	this.age = age;
}
Home.prototype.toString = function() {
	return '(' + this.name + ', ' + this.age + ')';
}
let zr = new Home('张睿' , 26)

//同样功能，ES6-Class的写法(前面不需要加上function;方法之间不需要逗号分隔，加了会报错)
class Home {
	constructor(name , age) {
		this.name = name;
		this.age = age;
	} 
	toString() {
		return '(' + this.name + ', ' + this.age + ')';
	}
}
let zr = new Home('张睿' , 26) //使用的时候，也是直接对类使用new命令，跟构造函数的用法完全一致。

类的所有方法都定义在类的prototype属性上面。在类的实例上面调用方法，其实就是调用原型上的方法；

class Home{
  constructor() {
    // ...
  }
  toString() {
    // ...
  }
  toTrim() {
    // ...
  }
}
// 等同于
Home.prototype = {
  constructor() {},
  toString() {},
  toTrim() {},
};
//以下理解是错误的！！！
//Home.prototype = constructor() {};
//Home.prototype = toString() {};
//Home.prototype = toTrim() {};
};

//在类的实例上面调用方法，其实就是调用原型上的方法；
let zr = new Home('张睿' ， 26)
zr.constructor === Home.prototype.constructor // true
//所以利用Object.assign(),可以给类一次性添加多个方法
Object.assign(Home.prototype, {
  methodA(){},
  methodB(){}
});

//prototype对象的constructor属性，直接指向类的本身，这与构造函数是一样的。
Home.prototype.constructor === Home// true

constructor方法是类的默认方法；如果没有定义，会默认添加一个空的constructor方法！

class Home{
}

// 等同于
class Home{
  constructor() {}
}

类的实例生成的方法，与ES5一样，也是使用new关键字，如果没有，会报错！

与 ES5 一样，实例的属性除非显式定义在其本身（即定义在this对象上），否则都是定义在原型上（即定义在class上）。

与 ES5 一样，类的所有实例共享一个原型对象。

class Home{
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  toString() {
    return '(' + this.name + ', ' + this.age + ')';
  }
}
var zr= new Home('张睿', 26);
zr.toString() // (张睿, 26)
zr.hasOwnProperty('name') // true----name为实例对象zr的自身属性；
zr.hasOwnProperty('age') // true----age为实例对象zr的自身属性；
zr.hasOwnProperty('toString') // false----toString为原型对象的属性；
zr.__proto__.hasOwnProperty('toString') // true

//和 构造函数 一样，类的所有实例共享一个原型对象。
var zrA = new Home('张睿',26);
var zrB = new Home('孟强',30);

zrA .__proto__ === zrB .__proto__ //true----zrA和zrB的 __proto__都指向Home的prototype,所以__proto__属性是相等的。