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__属性是相等的。

点击了解更深层次的Class

完!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值