语法糖
语法糖是一个专业术语，指计算机语言中添加的某种语法，并且对语言的功能没有影响，只是方便使用
生成实例对象
ES5 - 构造函数和原型的组合
function Vue(options) {
this._init(options)
}
Vue.prototype._init= function (vm) {
console.log(vm);
}
let vm = new Vue({data:{a:1}}) // {data:{a:1}}
vm._init(444) // 444
ES6 - Class类
class Vue{
constructor(options){
this.$options = options
}
_init(vm){
if(!vm) {
console.log(this.$options);
return
}
console.log(vm);
}
}
let vm = new Vue({data:{a:1}})
vm._init(444)
类的构造方法
类的方法都定义在prototype对象上
可以通过Object.assign()方法往类的原型上添加方法。
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。
语法
Object.assign(target, ...sources)
ES5
function Observe(vm) {
console.log(vm);
}
Observe.prototype = {
constructor(){
},
initData(data){
console.log(data);
}
}
let myOb = Observe.prototype.initData
myOb(333) // 33
function Vue(options) {
this._init(options)
}
Vue.prototype._init= function (vm) {
console.log(vm);
}
let vm = new Vue({data:{a:1}}) // {data:{a:1}}
vm._init(444) // 444
Object.assign(Vue.prototype,{
_initData(){
console.log(999);
}
})
console.log(Vue.prototype);
Vue.prototype._initData()
image.png
ES6
class Vue{
constructor(options){
this.$options = options
}
_init(vm){
if(!vm) {
console.log(this.$options);
return
}
console.log(vm);
}
}
let vm = new Vue({data:{a:1}})
vm._init(444)
Object.assign(Vue.prototype,{
_initData(){
this.$options = {data:{b:2222}}
console.log(this.$options);
}
})
Vue.prototype._initData();
image.png
class类
基本语法
- 默认方法constructor（必须要有）
如果没有定义，也会默认添加一个空的constructor - class类必须new调用，否则报错。
普通构造函数可以当成一个普通函数，不用new也可以执行 - getter()和setter()方法
对应属性的存值和取值函数，可以通过这两个函数拦截属性的存取。
class Vue{
constructor(data){
this.data = data
this._data = data
}
get data(){
return this._data
}
set data(value){
this._data = value
console.log('set data');
}
}
let vm = new Vue(1) // 触发set
- class类的细节
- class类的内部默认是严格模式。
- class类不会进行生命提升。new操作必须在class类的后面
- class类内部定义的方法中this默认指向class类，但是如果通过解构赋值的方法拿到里面的方法，在执行时，this执行class类外部上下文。
class iVue {
cookDinner(food = 'beef'){
console.log('start');
this.cooking(food)
}
cooking(food){
console.log('dinner is',food);
}
}
let newVue = new iVue()
newVue.cookDinner()
let {cookDinner} = newVue
cookDinner() // 先输出‘start’，然后报错
- class类的静态属性和方法
类相当于实例的原型，是可以被实例继承的。如果某个方法不想被继承，加上static关键字
class Vue{
static count = 0
constructor(){
// 初始化调用一下add 将 count 0 -> 1
this.add()
}
add(){
Vue.count ++
}
}
let iCount = new Vue()
console.log(iCount.count); // undefined
console.log(Vue.count); //1
iCount.add()
console.log(Vue.count); //2
- class类的静态方法也可以被继承
class VueChild extends Vue{}
let iVue = new VueChild()
iVue.add()
console.log(iVue.count); // 2
