标签：ES6 ES5 重学 静态方法 dog 实例 Animal console type

ES5和ES6中Class类的相同与不同  

先说结论，简而言之ES5用function定义类，ES6用class定义类，class的本质是function，ES6中的类只是语法糖，它并没有改变ES5下类实现的本质。

类的定义

ES5

// ES5函数来描写类
// 声明类
let Animal = function (type) {
  this.type = type
  // 定义实例方法
  this.drink = function () {
    console.log('drink')
  }
}

// 定义原型方法
Animal.prototype.eat = function () {
  console.log('eat food')
}

// 实例化
let dog = new Animal('dog')
let monkey = new Animal('monkey')

ES6

// ES6 class
// class的本质是ES5用原型链声明类的语法糖
class Animal {
  constructor (type) {
    this.type = type
  }
  eat () {
    console.log('eat food')
  }
}

let dog = new Animal('dog')
let monkey = new Animal('monkey')

ES6类中的set和get方法

• set用于设置属性（无返回值）
• get用于读取属性（有返回值）

let _age = 4
class Animal {
  constructor (type) {
    this.type = type
  }
  get age () {
    return _age
  }
  set age (val) {
    this.realage = val
  }
  eat () {
    console.log('eat food')
  }
}

let dog = new Animal('dog')
console.log(dog.age) // 4
dog.age = 5 // 未生效 get定义的为只读属性
console.log(dog.age) // 4
console.log(dog.realage) // 5

ES5类中的 实例方法&原型方法&静态方法

• 实例方法只有实例可以调用

• 实例方法可以调用静态方法，不能调用原型方法

• 原型方法可以被实例和构造函数访问到

• 原型方法只可以调用静态方法

• 静态方法只有构造函数可以调用

 

ES5中定义三种方法及调用关系

let Animal = function (type) {
  this.type = type
  // 实例方法
  this.drink = function () {
    // 实例方法可调用类的静态方法
    Animal.walk()
    console.log('drink')
  }
}

// 原型方法
Animal.prototype.eat = function () {
  // 原型方法可调用类的静态方法
  Animal.walk()
  console.log('eat food')
}

// 静态方法
Animal.walk = function () {
  console.log('walking')
}

let dog = new Animal('dog')
dog.drink() // walking drink
dog.eat() // walking eat food
Animal.walk() // walking静态方法只能由<类自身&实例方法&原型方法>调用，实例对象无法调用
// dog.walk() // dog.walk is not a function  实例对象无法调用静态方法

 

ES6类中的 实例方法&原型方法&静态方法

• 实例方法=原型方法 类中直接定义的实例方法默认就是ES5中的原型方法（语法糖）

• 静态方法用static前缀定义

• 静态方法只有构造函数可以调用，原型方法是实例和构造函数都可以调用，是共享的方法。

class Animal {
  constructor (type) {
    this.type = type
  }
  // 定义实例对象的方法
  eat () {
    // 使用静态方法，以类形式访问，而非this访问
    Animal.walk()
    console.log('eat food')
    console.log(this.type) // 类的例实例对象的方法可以获取到实例对象的信息，输出dog
  }
  // static 定义类的静态方法
  static walk () {
    console.log('walking')
    console.log(this.type) // 类的静态方法无法获取到实例对象的信息，输出undefined
  }
}
let dog = new Animal('dog')
dog.eat() // walking ； undefined ； eat food ； dog
Animal.walk() // walking ； undefined ；
dog.walk() // dog.walk is not a function
// 得出结论：需要访问实例对象的信息时用实例对象的方法，否则使用static静态方法
// 实例方法就是只有实例可以调用，静态方法只有构造函数可以调用，原型方法是实例和构造函数都可以调用，是共享的方法。

 

 

 

标签：ES6,ES5,重学,静态方法,dog,实例,Animal,console,type
来源： https://www.cnblogs.com/xzweb/p/12264101.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。