ECMAScript6已经支持了class,但之前版本都不支持类,但是可以通过一些方法来模拟类。

js中的类,既是重点,也是难点,很多时候都感觉模棱两可。

首先强调一下js中很重要的3个知识点:this、prototype、constructor。

下面我们来总结一下定义(模拟)类的几种方法:

1.工厂模式

function createObject(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.getName = function(){
return this.name;
};
obj.getAge = function(){
return this.age;
}
return obj;
}
var obj2 = createObject("王五",19);
console.log(obj2.getName());
console.log(obj2.getAge());
console.log(obj2.constructor);

工厂模式的方法创建对象,工厂模式可以根据接受的参数来创建一个包含必要信息的对象,可以无限次数的调用这个方法,每次都返回一个包含2个属性2个方法的对象。工厂模式解决了创建类似对象的问题,但没有解决对象的识别问题,即不能确定一个对象的类别,统一为Object。

2.构造函数法

function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
} Person.prototype = {
constructor:Person,
getName:function(){
return this.name;
},
getAge:function(){
return this.age;
},
getJob:function(){
return this.job;
}
} var p = new Person("二麻子",18,"worker");
console.log(p.constructor);
console.log(p.getName());
console.log(p.getAge());
console.log(p.getJob());

构造函数的方式虽然确定了对象的归属问题,能够确定对象的类型,但构造函数中的方法需要在每个对象中都要重新创建一遍,导致一些性能问题。

3.原型模式

function Person(){

}
Person.prototype = {
constructor:Person,
name:"张三",
age:21,
job:"teacher",
getName:function(){
return this.name;
},
getJob:function(){
return this.job;
}
} var p = new Person();
console.log(p.getName()); //张三
console.log(p.getJob()); //teacher
var p2 = new Person();
p2.name = "李四";
console.log(p2.getName()); //李四

由实例代码我们可以知道,对象实例可以访问原型中的值,但不能重写原型中的值,如果对象实例中定义了和原型重名的属性,那么该属性就会屏蔽原型中的那个属性,但并不会重写。

4.封装(暂且这么叫吧)

var Dog = {
createDog:function(){
var dog = {};
dog.name = "汪汪";
dog.sayHello = function(){
console.log("Hello World!");
};
return dog;
}
};
var dog = Dog.createDog();
dog.sayHello();

就是把代码都封装起来,将实例对象作为一个整体返回,有点类似于工厂模式。

js定义类的方法的更多相关文章

  1. js定义类和方法

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

  2. JS定义类的六种方式详解

    转载自: http://www.jb51.net/article/84089.htm 在前端开发中,经常需要定义JS类.那么在JavaScript中,定义类的方式有几种,分别是什么呢?本文就JS定义类 ...

  3. 洗礼灵魂,修炼python(47)--巩固篇—定义类的方法之@classmethod,@staticmethod

    定义类的方法,相信你会说,不就是在class语句下使用def () 就是定义类的方法了嘛,是的,这是定义的方法的一种,而且是最普通的方式 首先,我们已经知道有两种方式: 1.普通方法: 1)与类无关的 ...

  4. js定义类

    以下是es5标准里定义类的方法: function Point(x,y){ this.x=x; this.y=y; } Point.prototype.toString=function(){ ret ...

  5. Javascript中两种最通用的定义类的方法

    在Javascript中,一切都是对象,包括函数.在Javascript中并没有真正的类,不能像C#,PHP等语言中用 class xxx来定义.但Javascript中提供了一种折中的方案:把对象定 ...

  6. JS中定义类的方法

    JS中定义类的方式有很多种: 1.工厂方式    function Car(){     var ocar = new Object;     ocar.color = "blue" ...

  7. JS中定义类的方法<转>

    转载地址:http://blog.csdn.net/sdlfx/article/details/1842218 PS(个人理解): 1) 类通过prototype定义的成员(方法或属性),是每个类对象 ...

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

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

  9. js构建类的方法

    Javascript是一种基于对象的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有Class.(不过,ES6引入了Class这个概念,作为对 ...

随机推荐

  1. 关于Addressable的疑问

    1)关于Addressable的疑问2)Addressable如何进行热更新3)如何设置SceneView相机的Shader变量4)Activity默认为SingleTask的原因5)关于Resour ...

  2. 【Weiss】【第03章】练习3.7:有序多项式相乘

    [练习3.7] 编写一个函数将两个多项式相乘,用一个链表实现.你必须保证输出的多项式按幂次排列,并且任意幂次最多只有一项. a.给出以O(M2N2)时间求解该问题的算法. b.写一个以O(M2N)时间 ...

  3. vuepress-theme-reco + Github Actions 构建静态博客,部署到第三方服务器

    最新博客链接 Github链接 查看此文档前应先了解,vuepress基本操作 参考官方文档进行配置: vuepress-theme-reco VuePress SamKirkland / FTP-D ...

  4. Redis(十二):redis请求转发的实现

    请求转发一般的原因为: 1. 该请求自身无法处理,需要转发给对应的服务器处理: 2. 为实现负载均衡,使用路由服务,选择目标实例进行转发: 在集群模式下,请求可以打到任何一台redis服务器上.然而并 ...

  5. 云CRM和本地CRM哪个更好

    现在CRM系统按照服务器部署方式的不同分为本地CRM和云CRM两种,本地CRM需要在企业内部部署服务器,而云CRM的服务器则是安装在云服务器上面,很多企业可能不知道应该选择云CRM还是本地CRM.下面 ...

  6. 目标检测 | 经典算法 Cascade R-CNN: Delving into High Quality Object Detection

    作者从detector的overfitting at training/quality mismatch at inference问题入手,提出了基于multi-stage的Cascade R-CNN ...

  7. 强智教务系统验证码识别 Tensorflow CNN

    强智教务系统验证码识别 Tensorflow CNN 一直都是使用API取得数据,但是API提供的数据较少,且为了防止API关闭,先把验证码问题解决 使用Tensorflow训练模型,强智教务系统的验 ...

  8. cmdb 配置

    cmdb客户端文件夹创建 客户端:client:-bin:启动文件-src:源文件(核心代码)-conf:配置文件-lib:全局的一些方法 和配置-test:测试文件

  9. vue的使用经验

    导读 这一次的口号是,带你重新认识vue,拯救1,2个前端开发者. 从2018年从事前端职业以来,呆过大小公司,干这一行都有2年多.代码写的多了,就越来越体会新手程序员都是挖坑的.在工作过程中,用一种 ...

  10. [ASP.NET Core 3.1]浏览器嗅探解决部分浏览器丢失Cookie问题

    今天的干货长驱直入,直奔主题 看了前文的同学们应该都知道,搜狗.360等浏览器在单点登录中反复重定向,最终失败报错. 原因在于,非Chrome80+浏览器不识别Cookie上的SameSite=non ...