主题:创建对象

原型模式

JavaScript中的每个对象都有一个prototype属性(原型属性),这个属性是一个指针,指向一个对象,而这个对象可以由一些属性和方法组成。被指向的对象,可以是多个对象的原型,这样创建的对象就共享了一个原型对象。

 function Person() {
} Person.prototype.name = "xuchaoi";
Person.prototype.age = 24;
Person.prototype.sayName = function() {
alert(this.name);
}; var person1 = new Person();
var person2 = new Person();
alert(person1.name === person2.name); //true

这里可提炼一下,用更简洁的方式实现。但需要注意contructor属性的变化!

function Person() {
}
//注意:用下面的方式的话Person.prototype的contructor属性就指向对象{...}了,这里通过设置contructor属性去除不想要的结果
Person.prototype = {
contructor: Person,
name: "xuchaoi",
age: 24,
sayName: function() {
alert(this.name);
}; var person1 = new Person();
var person2 = new Person();
alert(person1.name === person2.name); //true

但这种模式存在一个很大的缺点,若共享的属性中存在引用类型,就会存在一个对象该属性修改后,所有对象的该属性都被修改。

 function Person() {
}
Person.prototype.name = "xuchaoi";
Person.prototype.friends = ["小明","小红"];
Person.prototype.sayName = function() {
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("小王");
alert(person2.friends); //"小明,小红,小王"

为了解决这个问题,我们可以把构造函数与原型模式进行组合使用。不能共享的属性放在构造函数中,原型模式中放一些共享的属性。这是目前JavaScript中使用最为广泛、认可度最高的一种创建自定义类型的方式。

 function Person(name, age) {
this.name = name;
this.age = age;
this.friends = ["小红", "小明"];
} Person.prototype = {
contructor : Person,
sayName : function() {
alert (this.name);
}
}
var person1 = new Person("xu1", 20);
var person2 = new Person("xu2", 21);
person1.friends.push("小王");
alert(person1.friends); //"小红,小明,小王"
alert(person2.friends); //"小红,小明"

此外还有:

寄生构造函数模式(函数内部封装一个创建对象过程,然后再返回这个创建的对象)

 function Person(name, age) {
var o = new Object();
o.name = name;
o.age = age;
o.sayName = function() {
alert(this.name);
};
return o;
}
var person1 = new Person("xuchaoi", 20);
person1.sayName(); //"xuchaoi"

稳妥构造函数模式(类似于寄生构造函数模式,但构造函数内部的创建对象过程中不使用this,不使用new来调用构造函数)

 function Person(name, age) {
var o = new Object();
o.name = name;
o.age = age;
o.sayName = function() {
alert(name);
};
return o;
}
var person1 = Person("xuchaoi", 20);
person1.sayName(); //"xuchaoi"

回归JavaScript基础(十)的更多相关文章

  1. 回归JavaScript基础(六)

    主题:引用类型Date.RegExp的介绍. 上节主要主要介绍了Object.Array引用类型.这节将继续为大家介绍引用类型,并对书中的一些知识点进行总结与归纳,也借此巩固自己对JavaScript ...

  2. 回归JavaScript基础(一)

    主题:JavaScript简介. 一.JavaScript的起源 JavaScript诞生于1995年.当时,它的主要作用是处理一些输入验证操作.之前的话,都是把表单数据发送到服务器端,然后再去判断有 ...

  3. 回归JavaScript基础(九)

    主题:理解对象,创建对象. 小明是一名程序猿,也是一条单身狗!他常常自嘲:每天都会有很多对象,但却没有女朋友! 多么痛的领悟.哈哈,目前比较流行的编程语言都是面向对象的语言(Object-Orient ...

  4. 回归JavaScript基础(八)

    主题:引用类型包装类.单体内置对象的介绍. 对于我们开发人员来说,JavaScript有种引用类型一定很陌生!那就是基本包装类型:Boolean.Number和String.这也不是我们的错,主要这些 ...

  5. 回归JavaScript基础(七)

    主题:引用类型Function的介绍. 今天首先说的就是Function类型.下面就是定义函数的两种方法,第一种使用函数声明语法定义,第二种使用函数表达式定义.这两种定义函数的方式几乎没有什么区别. ...

  6. 回归JavaScript基础(五)

    主题:介绍引用类型Object.Array. 在上一章中,作者就在说变量的值的时候,提到过引用类型这个概念.JavaScript中存在基本类型和引用类型,其中引用类型很重要,这里有许多我们需要注意的东 ...

  7. 回归JavaScript基础(四)

    主题:JavaScript变量.作用域和内存问题 JavaScript的变量和别的语言比起来是与众不同的.说道变量,不得不谈他的作用域.同很多语言一样,JavaScript开发者也不用担心开发中内存的 ...

  8. 回归JavaScript基础(三)

    主题:JavaScript基本概念. 任何语言的核心必然会描述这门语言最基本的工作原理.这部分内容对我们来说,读起来很乏味,甚至会产生困意,但这部分内容却是重要的!我有幸拜读<JavaScrip ...

  9. 回归JavaScript基础(二)

    主题:在HTML中使用JavaScript. 要想把JavaScript放到网页中,就必须涉及到Web的核心语言HTML.向HTML页面中插入JavaScript的主要方法,就是使用<scrip ...

随机推荐

  1. 面试基础知识集合(python、计算机网络、操作系统、数据结构、数据库等杂记)

    python python _.__.__xx__之间的差别 python中range.xrange和randrange的区别 python中 =.copy.deepcopy的差别 python 继承 ...

  2. puppet的使用:ERB模板介绍

    ERB介绍 全称是Embedded RuBy,意思是嵌入式的Ruby,是一种文本模板技术,用过JSP的话,会发现两者语法很像. 我们项目中一般用ERB来产生各模块的配置文件.ERB模板也可以用来产生W ...

  3. php完美匹配邮箱、链接地址和电话号码

    php完美匹配邮箱.链接地址和电话号码 写了好一会有问题,朋友这边很好功能,借用了.嘎嘎 //31日 更新: 匹配手机以及电话号码 重新修改,可支持18开头的手机号,并修改bug,可匹配出字符串中所有 ...

  4. Ubuntu 安装配置最新版 PostgreSQL

    环境:Ubuntu Xenial (16.04)     !!! CentOS 参考这里 #安装 PostgreSQL sudo apt-get updatesudo apt-get upgradea ...

  5. 公共技术点( View 绘制流程)

    转载地址:http://p.codekk.com/blogs/detail/54cfab086c4761e5001b253f 本文为 Android 开源项目源码解析 公共技术点中的 View 绘制流 ...

  6. 解决org.apache.shiro.session.UnknownSessionException: There is no session with id的问题

    一.背景 最近在整合了Spring+Shiro+Redis实现tomcat集群session共享的问题之后,发布以后运行以后发现老是会出现:org.apache.shiro.session.Unkno ...

  7. Java 容器源码分析之Queue

    简介 Queue是一种很常见的数据结构类型,在java里面Queue是一个接口,它只是定义了一个基本的Queue应该有哪些功能规约.实际上有多个Queue的实现,有的是采用线性表实现,有的基于链表实现 ...

  8. C# ABP - 创建自己的模块

    本篇文章介绍怎么创建自己的模块,并且使用依赖注入方法进行模块间的无缝结合. 我们创建一下自己的一个会员模块,针对不同的系统都可以用.你们可以看看我是怎么做的,或者从中得到启发. 目录 1.开始创建项目 ...

  9. [转]magento 2 modes – 每种模式的特点及如何切换(翻译)

    本文转自:https://www.hellomagento2.com/switch-magento-2-system-modes/ 原文地址 在开始 Magento 2 使用之前,需要了解一些基本的东 ...

  10. webpack打包优化并开启gzip

    应用场景:项目使用webpack2.x进行打包,打包后静态资源通过nginx转发配置: 问题:webpack打包后的资源文件特别,特别大,没打包之前页面一个页面js有2M左右(其中已经抽离了css)? ...