JavaScript创建类的四种方式

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript创建类的四种方式，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2061字，纯文字阅读大概需要3分钟。

内容图文

类的四种定义方法

1.工厂模式

function Car(name, color, price) {
  var tempcar = new Object; 
  tempcar.name = name; 
  tempcar.color = color; 
  tempcar.price = price; 
  
  tempcar.getCarInfo = function () { 
  	console.log(`name: ${this.name},color: ${this.color},price: ${this.price}`); 
  }
  return tempcar;
} 

var mycar = new Car('BMW', 'red', '100000'); 
mycar.getCarInfo(); 

缺点：每次 new 一个对象的时候，都会重新创建一个 getCaeInfo() 函数；

2. 构造函数方式

function Car(name, color, price) { 
    this.name = name; 
    this.color = color; 
    this.price = price; 
    this.getCarInfo = function () {
        console.log(`name: ${this.name},color: ${this.color},price: ${this.price}`); 
    } 
} 

var myCar = new Car('桑塔纳', 'green', '123456'); 
myCar.getCarInfo(); 

优点：

1. 不用创建临时对象；

2. 不用返回临时对象；

缺点：与‘工厂模式’相同,重复创建函数；

3.原型方式

function Car(name, color, price) { 
    Car.prototype.name = name; 
    Car.prototype.color = color; 
    Car.prototype.price = price; 
    Car.prototype.getCarInfo = function () { 
        console.log(`name: ${this.name},color: ${this.color},price: ${this.price}`); 
    } 
} 

var myCar = new Car('兰博基尼', 'red', '10000000000'); 
myCar.getCarInfo(); 

优点：

1. 解决了重复创建函数的问题；

2. 可以使用 instanceof 检验类型 myCar instanceof Car // true

缺点： 多个实例创建的相同属性指向同一块内存；

例子：

Car.prototype.drivers = ['Tim', 'Jone']; 
myCar.drivers.push('mike'); 
console.log(myCar.drivers); // ['Tim', 'Jone', 'mike'] 

4.动态原型方式（推荐）

function Car(name, color, price, drivers) { 
    this.name = name; 
    this.color = color; 
    this.price = price; 
    this.drivers = drivers; 
}

Car.prototype.getCarInfo = function () { 
    console.log(`name: ${this.name},color: ${this.color},price: ${this.price}`); 
} 

var myCar = new Car('兰博基尼', 'red', '10000000000', ['qaz', 'wsx']); 
myCar.drivers.push('mi'); 
console.log(myCar.drivers); // ["qaz", "wsx", "mi"] 
var myCar1 = new Car('兰博基尼1', 'red1', '100000000001', ['qaz1', 'wsx1']); 
myCar1.drivers.push('mi1'); 
console.log(myCar1.drivers); // ["qaz1", "wsx1", "mi1"] 

思想：

类的属性 要随实例对象动态改变； => 动态

类的方法 要随原型保持不变；=> 原型

内容总结

以上是互联网集市为您收集整理的JavaScript创建类的四种方式全部内容，希望文章能够帮你解决JavaScript创建类的四种方式所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端