主题:创建对象

原型模式

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. ubuntu-12.04.5下编译openjdk8

    bash ./configure --with-target-bits=64 --with-boot-jdk=/usr/java/jdk1.7.0_80/ --with-debug-level=slo ...

  2. [原创]EF架构随心所欲打造属于你自己的DbModel

    前言 我们都知道EF可以生成Dbmodel,系统生成的Model有时候并不是我们想要的,如何我们要生成自己的Model,那么久需要我们手动的去修改T4模版,T4是对“Text Template Tra ...

  3. lucene 初探

    前言: window文件管理右上角, 有个搜索功能, 可以根据文件名进行搜索. 那如果从文件名上判断不出内容, 我岂不是要一个一个的打开文件, 查看文件的内容, 去判断是否是我要的文件? 几个, 十几 ...

  4. 微信小程序——<radio></radio>大小改变

    css样式改变大小: transform:scale(.7);

  5. windows环境下搭建Java开发环境(三)——Maven环境配置使用 (转)

    1. 安装配置Maven: 1.1 从Apache网站 http://maven.apache.org/ 下载并且解压缩安装Apache Maven. Maven下载地址: http://maven. ...

  6. VMware12 克隆虚拟机并且重新分配ip、mac

    记录如何快速拷贝一台虚拟机,并且重新分配IP.mac等方便自己做实验: 环境:VMWare12  .Redhat6.8 Step1.克隆虚拟机 虚拟机处于未打开状态,右击管理—>克隆 弹出克隆界 ...

  7. 在Java的反射中,Class.forName和ClassLoader的区别

    前言 最近在面试过程中有被问到,在Java反射中Class.forName()加载类和使用ClassLoader加载类的区别.当时没有想出来后来自己研究了一下就写下来记录一下. 解释 在java中Cl ...

  8. Spring基础(6) : 普通Bean对象中保存ApplicationContext

    public class Person implements ApplicationContextAware{ ApplicationContext context; public String na ...

  9. Redis集合操作

    Redis的集合以无序的形式存储多个各不相同的元素 (常用的集合命令) SADD : SADD key-name item [item ...]----------将一个或多个元素添加到集合里,并返回 ...

  10. TCP Socket Http关系

    理解Tomcat内部处理网络数据的机制同时需要了解相关的一些术语,这样我们在阅读源码的时候能更加清楚的理解Connector下使用到的Socket通信原理. TCP/IP: 数据在网络传输是基于TCP ...