js面向对象-工厂模式和构造函数模式

2018-08-09 admin

什么是面向对象

把数据和行为(对数据的操作)结合起来,有类的概念,通过类创建任意多个具有相同属性和方法的对象

  • 继承:可以使子类复用父类公开的变量、方法;
  • 封装:屏蔽一系列的细节。使外部调用时只要知道这个方法的存在;
  • 多态:父类的方法继承的到子类以后可以有不同的实现方式;
var Person = {
    name: "wheeler",
    age: 25,
    inMeeting: function () {
        return "I am in Meeting";
    }
};

创建对象

为了避免重复造轮子,产生大量的代码,我们可以使用工厂模式和构造函数模式。 创建对象目前有两种方式:

var Person = {
    name: "wheeler",
    age: 25,
    inMeeting: function () {
        return "I am in Meeting";
    }
};

优点:灵活方便 缺点:每创建一个新的对象都需要写出完整的定义语句,不便于创建大量相同类型的对象,不利于使用继承等高级特性

主要是配合构造函数使用

function Person(name, age, dream){
    this.name = name;
    this.age = age;
    this.dream = dream;
    this.myDream =function () {
        alert(this.dream);
    }
};
person1 = new Person('wheeler', 25, "哈哈");
person2 = new Person('wheeler2', 26, "嘿嘿");

工厂模式

什么是工厂模式?就是像工厂一样批量创建对象。具体来说,抽象创建具体对象的过程。

var createPerson = function (name, age, dream) {
    var person = {
        name: name,
        age: age,
        dream: function () {
            return dream;
        }
    };
    return person;

};
var person1 = createPerson('wheeler', 25, "哈哈");
var person2 = createPerson('wheeler2', 26, "嘿嘿");

构造函数模式

ECMAScript 中的构造函数可用来创建特定类型的对象。像Object和Array这样的原生构造函数,在运行时会自动出现在执行环境中。

function Person(name, age, dream){
    this.name = name;
    this.age = age;
    this.dream = dream;
    this.myDream =function () {
        alert(this.dream);
    }
};
var person1 = new Person('wheeler', 25, "哈哈");
var person2 = new Person('wheeler2', 26, "嘿嘿");

以上代码:

  • 没有显式地创建对象;
  • 直接将属性和方法赋给了this对象;
  • 没有return语句。

以这种方式调用构造函数实际上会经历以下4个步骤:

  • 创建一个新对象;
  • 将构造函数的作用域赋给新对象(因此this就指向了这个新对象);
  • 执行构造函数中的代码(为这个新对象添加属性);
  • 返回新对象。

原文链接:https://segmentfault.com/a/1190000015942921

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37627.html

文章标题:js面向对象-工厂模式和构造函数模式

相关文章
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template...
2017-03-13
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 <!DOCTYPE html> <html lang="en" style="width: 100%; height:100%;"&gt...
2017-02-17
NodeJS参考手册pdf版
下载地址:Nodejs参考手册PDF版下载 ...
2015-11-12
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
Riot.js:不足1KB的MVP客户端框架
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...
2016-03-11
typeof、instanceof和contructor的区别
typeof:以字符串的形式返回变量的原始类型,typeof在两种情况下会返回"undefined":一个变量没有被声明的时候,和一个变量的值是undefined的时候,注意,typeof null也会返回object,...
2015-11-12
回到顶部