回归JavaScript基础(十)

主题:创建对象

原型模式

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

 1 function Person() {
 2 }
 3
 4 Person.prototype.name = "xuchaoi";
 5 Person.prototype.age = 24;
 6 Person.prototype.sayName = function() {
 7     alert(this.name);
 8 };
 9
10 var person1 = new Person();
11 var person2 = new Person();
12 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

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

 1 function Person() {
 2 }
 3 Person.prototype.name = "xuchaoi";
 4 Person.prototype.friends = ["小明","小红"];
 5 Person.prototype.sayName = function() {
 6     alert(this.name);
 7 };
 8 var person1 = new Person();
 9 var person2 = new Person();
10 person1.friends.push("小王");
11 alert(person2.friends);    //"小明,小红,小王"

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

 1 function Person(name, age) {
 2     this.name = name;
 3     this.age = age;
 4     this.friends = ["小红", "小明"];
 5 }
 6
 7 Person.prototype = {
 8     contructor : Person,
 9     sayName : function() {
10         alert (this.name);
11     }
12 }
13 var person1 = new Person("xu1", 20);
14 var person2 = new Person("xu2", 21);
15 person1.friends.push("小王");
16 alert(person1.friends);    //"小红,小明,小王"
17 alert(person2.friends);    //"小红,小明"

此外还有:

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

 1 function Person(name, age) {
 2     var o = new Object();
 3     o.name = name;
 4     o.age = age;
 5     o.sayName = function() {
 6         alert(this.name);
 7     };
 8     return o;
 9 }
10 var person1 = new Person("xuchaoi", 20);
11 person1.sayName();    //"xuchaoi"

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

 1 function Person(name, age) {
 2     var o = new Object();
 3     o.name = name;
 4     o.age = age;
 5     o.sayName = function() {
 6         alert(name);
 7     };
 8     return o;
 9 }
10 var person1 = Person("xuchaoi", 20);
11 person1.sayName();    //"xuchaoi"
时间: 2024-11-05 13:40:36

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

javascript基础学习(十五)

javascript之cookie 学习要点: cookie介绍 创建与获取cookie cookie的编码 cookie的生存期 cookie的路径 cookie的domain cookie的secure 一.cookie介绍 cookie实际上就是一些信息,这些信息以文件的形式存储在客户端计算机上.在javascript中,cookie主要用来保存状态,或用于识别身份. 二.创建与获取cookie 创建cookie的语法代码如下所示:document.cookie="name=value&q

JavaScript基础--小案例:在网页指定位置弹出错误信息(十二)

案例分析:点击按钮后,在网页上指定区域,提示错误信息!5秒后,错误信息提示自动消失! 1 <script languag="javascript" type="text/javascript"> 2 var clearId; 3 function test(){ 4 document.getElementById("showMsg").style.cssText="width:200px;height:50px;left:6

JavaScript基础--事件驱动和访问CSS技术(十)

1.原理: 2.快速入门案例 js中的事件主要分为4种: 案例:监听鼠标点击事件,并能够显示鼠标点击的位置x,y <script language="javascript" type="text/javascript"> function test1(e){ window.alert('x='+e.clientX+'y='+e.clientY); } function test2(e){ window.alert('x='+e.clientX+'y='+

javascript基础学习(十二)

javascript之BOM 学习要点: 屏幕对象 History对象 Location对象 一.屏幕对象 Screen对象是一个由javascript自动创建的对象,该对象的主要作用是描述客户端的显示器的信息. 目前显示器分辨率为800X600或1024X768两种. screen.height:屏幕的高度 screen.width:屏幕的宽度 screen.availHeigh:屏幕的有效高度 screen.availWidth:屏幕的有效宽度 二.History对象 History对象可以

JavaScript基础--DOM对象加强篇(十四)

1.document 对象 定义:document对象代表的整个html文档,因此可以去访问到文档中的各个对象(元素)document重要的函数 1.1 write 向文档输出文本或js代码 1.2 writeln 向文档输出文本或者js代码,与write不一样的地方是,writeln是换行输出. 比如: document.write("hello");document.writeln("ok"); hello ok 但是对浏览器来看,输出效果没有区别. 1.3 g

javascript基础学习(十)

javascript之数组 学习要点: 数组的介绍 定义数组 数组元素 数组的方法 一.数组的介绍 数组中的元素类型可以是数字型.字符串型.布尔型等,甚至也可以是一个数组. 二.定义数组 1.通过数组的构造函数来定义数组: var arr=new Array(); var arr=new Array(size); var arr=new Array(element1,element2,...); 2.直接定义数组: var arr=["字符串",true,13]; ps: 和Objec

学习笔记 第十五章 JavaScript基础

第15章   JavaScript基础 [学习重点] 了解JavaScript基础知识 熟悉常量和变量 能够使用表达式和运算符 正确使用语句 能够掌握数据类型和转换的基本方法 正确使用函数.对象.数组等核心知识和技法 能够编写简单的脚本,解决网页中常见特效和互动效果 15.1  JavaScript入门 JavaScript是一种轻量级.解释型的Web开发语言.现代浏览器都已嵌入了JavaScript引擎./sc 15.1.1 在网页中插入JavaScript代码 使用<script>标签,可

Javascript基础篇小结

Javascript基础篇小结 字数9973 阅读3975 评论7 喜欢28 转载请声明出处 博客原文 随手翻阅以前的学习笔记,顺便整理一下放在这里,方便自己复习,也希望你有也有帮助吧 第一课时 入门基础 知识点: 操作系统就是个应用程序 只要是应用程序都要占用物理内存 浏览器本身也是一个应用程序 浏览器本身只懂得解析HTML 调用浏览器这个应用程序的一个功能绘制 1.javascript介绍 JavaScript操作DOM的本质是=获取+触发+改变 目的:就是用来操作内存中的DOM节点 修改D

【javascript基础】7、继承

原文:[javascript基础]7.继承 前言 由于本人水平有限,所以有些高手觉得现在写的内容偏容易,要一点点来嘛,今天和大家学习或者复习一下javascript的继承.我也就是尽量写吧······ 继承 javascript的继承其实主要就是通过原型链来实现的,原型链我们之前已经和大家一起学习过,这里就不浪费大家的时间了.javascript连类都没有,还说啥继承呢,这还是模拟类的继承.<javascript高级程序设计>上分成了几个方式,有的书上分为类式继承,原型式继承,这就是模拟其他语