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对象了。

js构建类的方法的更多相关文章

  1. JS创建类的方法--简单易懂有实例

    版权声明:本文为博主原创文章,转载请注明出处 Javascript是一种基于对象的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有Class. ...

  2. js定义类和方法

    js中定义一个类 //定义一个user类 var user = function(){ //类中的属性 var age; //设置age的值 var setAge = function(age){ t ...

  3. js定义类的方法

    ECMAScript6已经支持了class,但之前版本都不支持类,但是可以通过一些方法来模拟类. js中的类,既是重点,也是难点,很多时候都感觉模棱两可. 首先强调一下js中很重要的3个知识点:thi ...

  4. C#字符串数组排序 C#排序算法大全 C#字符串比较方法 一个.NET通用JSON解析/构建类的实现(c#) C#处理Json文件 asp.net使用Jquery+iframe传值问题

    C#字符串数组排序   //排序只带字符的数组,不带数字的 private   string[]   aa   ={ "a ", "c ", "b & ...

  5. 几种常用的JS类定义方法(转)

    // 方法1 对象直接量 var obj1 = { v1 : "", get_v1 : function() { return this.v1; }, set_v1 : funct ...

  6. 几种常用的JS类定义方法

    几种常用的JS类定义方法   // 方法1 对象直接量var obj1 = {    v1 : "",    get_v1 : function() {        return ...

  7. iscroll.js的简单使用方法(总结)

    iscroll.js的简单使用方法(总结) 一.总结 一句话总结:Scroll是一个类,每个需要使用滚动功能的区域均要进行初始化. 最佳的HTML结构如下: <div id="wrap ...

  8. WebView全面学习(一)--常用类和方法

    WebView全面学习(一)--常用类和方法 WebView本质上是一个View,他基于webkit引擎来展示web页面 在Android不同的版本webkit内核有所区别,从Android版本上看, ...

  9. iscroll.js的简单使用方法

    参考链接:https://www.cnblogs.com/Renyi-Fan/tag/js%E6%8F%92%E4%BB%B6/default.html?page=2 目录 一.总结 一句话总结:Sc ...

随机推荐

  1. Java学习之路(五):常见的对象操作

    Object对象 我们先来介绍一下API API(Application Programming Interface):应用程序编程接口 Java API 就是Java提供给我们使用的类,这些类将底层 ...

  2. Struts2方法调用的三种方式(有新的!调用方法的说明)

    在Struts2中方法调用概括起来主要有三种形式 第一种方式:指定method属性 <action name="heroAction" class="com.ABC ...

  3. encodeURI、encodeURIComponent、btoa及其应用场景

    escape不编码字符有69个:*,+,-,.,/,@,_,0-9,a-z,A-Z encodeURI不编码字符有82个:!,#,$,&,’,(,),*,+,,,-,.,/,:,;,=,?,@ ...

  4. git 学习之撤销和删除

    在实际的工作和学习中我们经常的会对文件进行修改,但是或多或少的就会发现由于某些原因修改是错误的这时候就需要对所做的修改进行撤销,更或者某些时候需要对文件进行删除.本节就会告诉大家如何操作. 撤销操作 ...

  5. PHP之mb_strripos使用

    mb_strripos (PHP 4 >= 4.0.6, PHP 5, PHP 7) mb_strrpos - Find position of last occurrence of a str ...

  6. 解决angular-deckgrid高度不均衡和重加载的问题

    在项目中使用angular-deckgrid+ng-infinite-scroll实现瀑布流的无限加载.但是实际测试中发现deckgrid有2个比较严重影响体验的BUG: 每次添加新的card,整个d ...

  7. WCF Data Services 5.0 for OData V3

    https://www.microsoft.com/en-us/download/details.aspx?id=29306 VS 2010 下 安装 WCF Data Services 5.0 en ...

  8. 设置tomcat字符编码

    Tomcat的默认编码是ISO-8859-1,如果有是get请求时,会出现乱码,这种情况可以修改Tomcat的编码解决,当然也可以写个过滤器来解决. 在tomcat的conf目录下,编辑server. ...

  9. SQL Serever学习5——数据库配置

    数据库的主要属性 限制访问 用来设置数据允许用户访问的状态,或者说允许多少客户访问,有3个选项: MULTI_USER(多个),大多数数据库正常状态,允许多个用户同时访问该数据库. SINGLE_US ...

  10. android 使用图片轮播图---banner 使用

    转自:https://github.com/youth5201314/banner 使用步骤 Step 1.依赖banner Gradle dependencies{ compile 'com.you ...