JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】

本文实例讲述了JS常见创建类的方法。分享给大家供大家参考，具体如下：

Javascript是一种基于对象的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有Class。（不过，ES6引入了Class这个概念，作为对象的模板。通过class关键字，可以定义类。ES6入门：http://es6.ruanyifeng.com/）。

但是在项目开发中，经常用到JS面向对象开发，这就需要我们去用JS创建类，从而去实例化一些对象。接下来我们介绍一下在JS中创建类的几种方式：

1.工厂方式：

//通过工厂方式创建对象，先定义一个工厂方法
function createObj(){
  var obj = new Object();
  obj.name="xxx";
  obj.say=function(){
    alert("我是xxx");
  }
  return obj;
}
//调用工厂方法创建对象:
var obj1 = createObj();
//也可以用这种形式
function createObj(){
  var obj = {}; //这样生成对象
  obj.name="xxx";
  obj.say=function(){
    alert("我是xxx");
  }
  return obj;
}
var obj1 = createObj();

这种方式的问题是每一次通过工厂方法去创建一个对象，这个对象的属性name和方法say都必须重新创建一次，浪费内存。

2.构造器方式：

//创建一个构造器，构造函数首字母大写
function Obj(){
  this.name="xxx";
  this.say=function(){
    alert("我是xxx");
  };
}
//利用构造器，通过new关键字生成对象
var obj1=new Obj();

这是最基本的方式,但是也存在和工厂方式一样的毛病。

3.原型方式：

//用空函数创建一个类
function Obj(){
}
//在类的原型链上添加属性和方法
Obj.prototype.name="xxx";
Obj.prototype.say=function(){
  alert("我是xxx");
}
//生成对象
var obj1=new Obj();

这个方式的缺点是，当有引用属性时，改变一个对象的这个属性也会改变其他对象的这个属性。因为一个引用属性，都是指向的同一个地方。

4.原型/构造联合方式

//用构造函数定义对象的非函数属性
function Obj(name){
  this.name=name;
  this.arr=new Array('a','b');
}
//用原型方式定义对象的方法
Obj.prototype.say=function(){
  alert("我是xxx");
}
//生成对象
var obj1 = new Obj('xxx');

这种是目前用的最多的创建类和对象的方式，将方法和属性用不同的方式封装。

5.动态原型方式

//动态原型方式和原型/构造混合方式的原理相似，唯一的区别就是赋予对象方法的位置
function Person(name, sex) {
  this.name = name;
  this.sex = sex;
  if (typeof this.say != "function") {
    Person.prototype.say = function () {
      alert(this.name);
    }
  }
}
var man =new Person ("凯撒", "男");
man.say();//凯撒

动态原型模式是将所有的信息都封装到构造函数中，构造函数中，只用say不存在的情况下，才会将它添加到原型中。这段代码只有在初次调用时才会执行。

实例化obj对象有三步：

1. 创建obj对象：

obj=new Object();

2. 将obj的内部__proto__指向构造他的函数Obj的prototype，同时，obj.constructor===Obj.prototype.constructor，从而使得obj.constructor.prototype指向Obj.prototype（obj.constructor.prototype===A.prototype）。obj.constructor.prototype与的内部_proto_是两码事，实例化对象时用的是_proto_，obj是没有prototype属性的，但是有内部的__proto__，通过__proto__来取得原型链上的原型属性和原型方法。

3. 将obj作为this去调用构造函数Obj，从而设置成员（即对象属性和对象方法）并初始化。

当这3步完成，这个obj对象就与构造函数Obj再无联系，这个时候即使构造函数Obj再加任何成员，都不再影响已经实例化的obj对象了。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

# JS # 创建类 # 工厂方式 # 构造器方式 # 原型方式 # 联合方式 # Javascript使用function创建类的两种方法(推荐) # Javascript 创建类并动态添加属性及方法的简单实现 # JS创建类和对象的两种不同方式 # JavaScript中创建类/对象的几种方法总结 # JavaScript创建类/对象的几种方式概述及实例 # javascript最常用与实用的创建类的代码 # 利用MS AJAX注册Javascript命名空间并创建类 # 讨论javascript(一)工厂方式 js面象对象的定义方法 # javascript工厂方式定义对象 # JavaScript中使用构造器创建对象无需new的情况说明 # JavaScript设计模式之工厂模式和构造器模式 # javascript 混合的构造函数和原型方式 # 动态原型方式 # 我是 # 凯撒 # 都是 # 创建一个 # 面向对象 # 的是 # 这是 # 是一种 # 也会 # 相关内容 # 最多 # 才会 # 可以用 # 遍历 # 感兴趣 # 这段 # 这就 # 数据结构 # 而去 # 给大家

返回目录在线咨询

上一篇：如何选择适合的域名和空间来搭建网站？
下一篇：在HTML按钮的onclick事件中高效传递PHP数组至JavaScript函数

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】

您的项目需求