一、序

面向对象有一个标志,那就是它们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象。ECMA-262把对象定义为“无序属性的集合,其属性可以包含基本值、对象或者函数”。

使用Object来创建对象,如下代码所示:

        var animal = new Object();
animal.name = "小猫";
animal.color = "黑色";
animal.print = function () {
console.log(this.name + "的颜色是:" + this.color);
}

使用对象字面量来创建对象,如下代码所示:

 var animal = {
name: "小猫",
color: "黑色",
print: function () {
console.log(this.name + "的颜色是:" + this.color);
}
};

通过上面两种方式,虽然我创建了对象,但是并没用满足对象的封装特性,我并不能复用这短代码,只能粘贴复制来创建新的对象,这并不是我想要的结果,前辈们就从面向对象的设计模式

的思想中提炼出一些新的方法。我们要站在巨人的肩膀上才能看得更远。

二、工厂模式

这种模式抽象了创建具体对象的过程。ECMAScript无法创建类,所以采用函数来封装以特定接口创建对象的细节。如下面代码所示:

        ///提供构造一个动物对象方法
function createAnimal(name, color) {
var obj = new Object();
obj.name = name;
obj.color = color;
obj.print = function () {
console.log(name + "的颜色是:" + color);
}
return obj; //返回对象
}
//实例化一个对象
var animal1 = createAnimal("小猫", "黑色");
animal1.print();

这种模式,虽然做到了代码可以复用的效果,但是却没有解决对象识别的问题,如果我们能够像申明Object,Array这样的原生构造函数就好了,所以就有了构造函数的衍生;

三、构造函数

熟悉C#、Java等语言的朋友,就知道一般来说我们都有无参构造函数、有参构造函数。像Array,就属于一种无参构造函数。先来看下面一段代码

        function Animal(name, color) {
this.name = name;
this.color = color;
this.print = function () {
console.log(this.name + "的颜色是:" + this.color);
}
} var animal1 = new Animal("小猫", "黑色");
animal1.print();

我们这采用了有参构造函数,和工厂模式比较起来,构造函数并没有显式的创建对象,直接将属性和方法赋给了this对象,没有return语句。通过instanceof方法我们可以得出构造函数

可以将它的实例化标识为一种特定的类型;

        console.log(animal1 instanceof Object);//true
console.log(animal1 instanceof Animal);//true

使用构造函数的主要问题,就是每个方法都要在每一个实例上重新创建一遍。ECMAScript中函数是对象,也就是说每定义一个函数,也就是实例化了一个对象,所以上面对象中print函数就实例化了2次。

这样做是没有必要的,所以我们可以通过把函数定义转移到构造函数外部来解决这个问题。

        function Animal(name, color) {
this.name = name;
this.color = color;
this.print = print
} function print() {
console.log(this.name + "的颜色是:" + this.color);
}

但是这样做新问题又来了,在全局作用域中定义的函数实际上只能被某个对象调用,这让全局作用域有点名不副实了。于是让我们这个自定义的引用类型就丝毫没有封装性可言了。接下来就有了原形模式来

解决这个问题了。

四、原型模式

我们创建每个函数都有一个prototype(原型)属性,这个属性是个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。如下面的代码所示:

        function Animal() {

        }

        Animal.prototype.name = "小猫";
Animal.prototype.color = "黑色";
Animal.prototype.print = function () {
console.log(this.name + "的颜色是:" + this.color);
} var animal = new Animal();
animal.print();

如果我们要改变这个对象中的属性的话,就直接对其属性重新赋值:

        var animal = new Animal();
animal.name = "小花猫";
animal.print();

但是一般来说,我们都喜欢在创建对象的时候就对其赋值,所以我就结合有参构造函数来重新改造下上面的代码

        function Animal(name, color) {
this.name = name;
this.color = color;
}
Animal.prototype.print = function () {
console.log(this.name + "的颜色是:" + this.color);
} var animal = new Animal("小黑猫", "黑色");
animal.print();

但是这样做,如果参数过于多就会显得很长,有时候传参的时候就会容易出错,根据我几年的C#代码经验,针对过于长的参数,我一般喜欢把参数分装成一个对象,作为参数,

如下代码所示:

        function Animal(setting) {
this.name = setting.name;
this.color = setting.color;
}
Animal.prototype.print = function () {
console.log(this.name + "的颜色是:" + this.color);
} var setting = {
name: "小猫",
color:"黑色"
}; var animal = new Animal(setting);
animal.print();

这样做封装就看起来简洁了许多,个人所爱吧。

五、结语

本来是计划早睡早起身体好的,现在又00:30了,又得晚睡早起了,今天就先温故知新到这,加油吧,老男孩!晚安!

JavaScript里的创建对象(一)的更多相关文章

  1. 重新认识JavaScript里的创建对象(一)

    一.序 面向对象有一个标志,那就是它们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.ECMA-262把对象定义为"无序属性的集合,其属性可以包含基本值.对象或者函数&quo ...

  2. 重新认识JavaScript里的创建对象

    一.序 面向对象有一个标志,那就是它们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.ECMA-262把对象定义为“无序属性的集合,其属性可以包含基本值.对象或者函数”. 使用Obje ...

  3. javascript里for循环的一些事情

    今天在给一个学妹调她的代码BUG时,她的问题就是在一个for循环里不清楚流程的具体流向,所以导致了页面怎么调都是有问题,嗯确实你如果不清楚语句流向很轻易就会出问题,所以说for循环不会用或者说用的不恰 ...

  4. Javascript里,想把一个整数转换成字符串,字符串长度为2

    Javascript里,想把一个整数转换成字符串,字符串长度为2.  想把一个整数转换成字符串,字符串长度为2,怎么弄?比如 1 => "01"11 => " ...

  5. JavaScript里的依赖注入

    JavaScript里的依赖注入 我喜欢引用这句话,“程序是对复杂性的管理”.计算机世界是一个巨大的抽象建筑群.我们简单的包装一些东西然后发布新工具,周而复始.现在思考下,你所使用的语言包括的一些内建 ...

  6. 如何才能通俗易懂的解释javascript里面的"闭包"?

    看了知乎上的话题 如何才能通俗易懂的解释javascript里面的‘闭包’?,受到一些启发,因此结合实例将回答中几个精要的答案做一个简单的分析以便加深理解. 1. "闭包就是跨作用域访问变量 ...

  7. javascript里的循环语句

    前序:我一直对于for跟for..in存在一种误解,我觉得for都能把事情都做了,为啥还要for...in...这玩意了,有啥用,所以今天就说说JavaScript里的循环语句. 循环 要计算1+2+ ...

  8. Safari 里的javascript 里不能用submit作为函数名

    Safari 里的javascript 里不能用submit作为函数名, 这样写的时候,怎么也运行不了JeasyUI的onSubmit的function, 改个名就可以了.而在chrome下面就没问题 ...

  9. JavaScript 里,$ 代表什么?/JQuery是什么语言?/html中用link标签引入css时的中 rel="stylesheet"属性?/EL表达式是什么?

    JavaScript 里,$ 代表什么? 比如说我写一个mouseover事件: $(document).ready(function(){ $("p").mouseover(fu ...

随机推荐

  1. navicat 批量插入 测试数据

    1. 前言 遇到线上大sql执行较慢, 10s+, 做优化改进时,首先想到的是在本地造出一个类似的库环境,先本地实验. 然后往表中创建大量数据... 2. 方案 利用mysql函数来插入大量数据 代码 ...

  2. CSS属性之attr()

    attr()准确的说,不应该是一个属性,而是一个CSS的函数,我们先看看MDN上的介绍吧: Summary The attr() CSS function is used to retrieve th ...

  3. js判断移动端页面按home键切换到桌面事件

    ---恢复内容开始--- 原理就是通过页面标签切换事件(visibilitychange)来判断,亦可用户移动端桌面和app切换. 先看代码: var hiddenProperty = 'hidden ...

  4. windows下生成上传git时需要用的SSH密钥

    参考:Windows上传代码到Github 打开“Git Bash” 输入 ssh-keygen -C "your email" -t rsa 出现如下结果: 成功后,信息里会显示 ...

  5. ubuntu下使用python3的有些库时,解决"raise ImportError(str(msg) + ', please install the python3-tk package') ImportError: No module named '_tkinter', please install the python3-tk package"的错误

    问题: 在Ubuntu下使用matplotlib这个库时,运行时出现如下错误: raise ImportError(str(msg) + ', please install the python3-t ...

  6. opencv3.2.0形态学滤波之形态学梯度、顶帽、黑帽

    /*一.形态学梯度 (1)含义:是膨胀图和腐蚀图之差 (2)数学表达式:dst=morph-grad(src,element) =dilate(src,element) - erode(src,ele ...

  7. Git Flow 代码版本控制模型

    说到代码版本控制,推荐一下最新的Git.跟SVN相比,最大的区别是它在本地也保存了一个代码库,这样可以离线工作,首先将代码提交到本地仓库,联网之后再同步到服务器端.代码托管网站 Github 和 Bi ...

  8. flutter控件之RadioButton

    import 'package:flutter/material.dart'; class LearnRadioButton extends StatefulWidget{ @override Sta ...

  9. js原生实现轮播

    前两天同事面试新人,让现场写”轮播的实现”.我一想这玩意貌似我也没写过啊,就在旁边暗搓搓地拖了一张纸也在那写,同事都纳闷了! 这玩意实现方法有很多种,就看喜欢那种,喜欢怎么写而已.我这里是通过对img ...

  10. C++箱子排序

    箱子排序 实现 把每个箱子用一个链表实现.在进行节点分配之前,每个箱子都是空的. 基本思想 1.从与排序链表的头部开始,逐个删除节点,并把它放到合适的箱子链表的头部 2.收集并连接每个箱子中的节点,产 ...