主题:创建对象

原型模式

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. WPF 中textBox实现只输入数字

    刚学到 通过本方法可以使文本框只能输入或复制入数字  对于数量类输入文本框比较有用 金额类只需小改动也可实现 以TextBox txtCount为例 添加TextChanged事件 代码如下 priv ...

  2. JavaScript事件模型

    1.什么是事件? 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软件工程中被称为观察员模式的模型,支持页面的行为 ...

  3. 主键映射和Hibernate映射

    组件映射 类组合关系的映射,也叫做组件映射! 注意:组件类和被包含的组件类,共同映射到一张表! 需求: 如汽车与车轮 代码示例: 1.JavaBean Wheel.java package com.g ...

  4. 百度2015校园招聘面试题回忆录(成功拿到offer)

    引言 盼望着,盼望着……今年终于轮到我找工作了,还深深记得去年跟在师兄后面各种打酱油的经历,当时觉得找工作好难啊,怎么面一个败一个,以后还能找到工作不? 不过当时的失败也是理所当然的,那时候没有做任何 ...

  5. Nginx图片防盗链【实战】

    访问我的博客 前言 博主目前在一家原创小说网站公司工作,由于站内的作品全部是原创,于是乎不可避免地会被一些盗版网站爬取盗版,对于防盗版一直没有很好的对策,让公司很是苦恼. 最近去一些盗版网站上搜索我们 ...

  6. Linux终端回话记录和回放工具 - asciinema使用总结

    目前linux终端回放工具常见的就是asciinema和script了, 这两种工具都有那种类似于视频回放的效果.虽然这样做的代价是录制过程中需要占用一定的cpu资源以及录制后可能会因为视频文件太大而 ...

  7. WebLogic 12c 修改节点 Managed Server 和 AdminServer 内存方法

    1.进入管理节点: 2.添加JVM参数: -Xms1024m -Xmx2048m -XX:PermSize=512m -XX:MaxPermSize=1024m JAVA 8 可将-XX:PermSi ...

  8. Docker基础教程(常用命令篇)

    1.查看docker信息 # 查看docker版本 $docker version # 显示docker系统的信息 $docker info 2.启动容器 # 交互式 $docker run -it ...

  9. 如何从GitHub迁移到GitLab?

    如何从GitHub迁移到GitLab? 在本文中,我们将解释如何从Github迁移到Gitlab,同时我们也将解释如何将Github的开源项目导入到Gitlab. 正如你可能非常清楚的那样, Gitl ...

  10. 长沙.NET社区之光

    奈何万事开头难 迎着改革开放四十年带来的春风,长沙的互联网生态环境以唐胡子俱乐部为首的一众互联网社群讲长沙互联网的环境推上了一个新的台阶.年底,我与有幸一起共事的溪源兄,下班后一起闲聊,觉着长沙的.N ...