javascript创建对象(二)

原型模式:每创建一个函数都有一个prototype属性,它是一个指针,指向一个对象;

原型模式创建函数的方式:

 1 function Movie(){
 2
 3 };
 4 Movie.prototype.name="Interstellar";
 5 Movie.prototype.year=2014;
 6 Movie.prototype.country="American";
 7 Movie.prototype.playMovie=function(){
 8    alert(this.name);
 9 }
10
11 var movie1=new Movie();
12 movie1.playMovie();//Interstellar;
13 var movie2=new Movie();
14 movie2.playMovie();//Interstellar;
15
16 alert(movie1.playMovie==movie2.playMovie);//true 有别于构造函数

对象字面量的方式

 1 function Movie(){
 2
 3 };
 4 Movie.prototype={
 5      name:"Interstellar",
 6      year:2014,
 7      country:"American",
 8      playMovie:function(){
 9        alert(this.name);
10 }
11 }
12 //这种方式原型对象的contructor属性不会指向Movie了,而是指向Object了。

每当代码读取某个属性时,都会先搜索对象实例本身,没有就继续搜索指针指向的原型对象,如果有就结束;通过hasOwnProperty()可以检测属性是存在实例中还是原型中:

 1 function Movie(){
 2 };
 3 Movie.prototype.name="FleetOfTime";
 4 Movie.prototype.year=2014;
 5 Movie.prototype.country="China";
 6 Movie.prototype.playMovie=function(){
 7    alert(this.name);
 8 }
 9 var movie1=new Movie();
10 alert(movie1.hasOwnProperty("name"));//原型上的 false
11 movie1.name="xxxx";
12 alert(movie1.hasOwnProperty("name"));//覆盖了原型上的,变成实例上的了  true

原型的动态性:对原型对象所做的任何修改都能够立即从实例中反映出来,例:

1 var movie=new Movie();
2 Movie.prototype.playOne=function(){
3     alert("One");
4 };
5 movie.playOne();//"One"
6
7 //给Movie原型对象添加了一个方法

但是如果是重写整个原型对象的话,那么就等于切断了构造函数与最初原型之间的联系了:

 1 function Movie(){
 2
 3 }
 4
 5 var movie=new Moive();
 6 //重写原型对象
 7 Movie.prototype={
 8     constructor:Movie,//对象字面量方式强制指向Movie,本来指向Object
 9     name:"xxx",
10     year:2012,
11     country:"xxxx",
12     sayName:function(){}
13 }
14 //这时候调用sayName()方法会出错
15 movie.sayName();//error   

原型对象的问题:对于包含引用类型值的属性来说,就有很大问题了,如下例子

 1 function Movie(){
 2 }
 3 Movie.prototype={
 4      constructor:Movie,
 5      name:"xxx",
 6      year:2014,
 7      place:["China","Japan"],
 8      playName:function(){
 9          alert(this.name);
10 }
11 }
12 var movie1=new Movie();
13 var movie2=new Movie();
14
15 movie1.place.push("korea");
16
17 alert(movie1.place)//"China,Japan,Korea"
18
19 alert(movie2.place)//"China,Japan,Korea"
20
21 //这里本来是想只改变movie1的place,结果也改到了movie2的

最好的创建对象方式:构造函数来定义实例属性,原型模式来定义方法和共享属性;

 1 function Movie(name,year,country){
 2      this.name=name;
 3      this.year=year;
 4      this.country=country
 5      this.place=["China","Japan"];
 6 }
 7 Movie.prototype={
 8        constructor:Movie,
 9        playName:function(){
10               alert(this.name);
11 }
12 }
13
14 var movie1=new Movie("Interstellar",2014,"American");
15 var movie2=new Movie("FleetOfTime",2014,"China");
16 movie1.place.push("Korea");
17 alert(movie1.place);//"China,Japan,Korea"
18 alert(movie2.place);//"China,Japan"
19
20 alert(movie1.place==movie2.place);//false
21 alert(movie1.playName==movie2.playName);//true

时间: 2024-11-05 22:33:35

javascript创建对象(二)的相关文章

JavaScript对象 创建对象(二)

组合使用构造函数和原型模式创建对象 function Person(name, age, job){ this.name = name; this.age = age; this.job = job; this.friends = ["Shelby", "Court"]; } Person.prototype = { constructor: Person, sayName : function () { alert(this.name); } }; var per

JavaScript创建对象(三)——原型模式

在JavaScript创建对象(二)--构造函数模式中提到,构造函数模式存在相同功能的函数定义多次的问题.本篇文章就来讨论一下该问题的解决方案--原型模式. 首先我们来看下什么是原型.我们在创建一个函数时,这个函数会包含一个属性prototype,这个属性是一个指针,它指向一个对象--该函数的原型对象,这就是原型,它包含了该函数类型的所有实例可共享的属性和方法,见下面示意图: 如图所示,声明了一个函数Person.在JavaScript中,一个函数被声明的同时就具有了一些属性,其中有一个叫做pr

Javascript 创建对象方法的总结(每天一些学习真的很快乐)

使用Javascript创建对象的方法有很多,现在就来列举一下: 1. 使用Object构造函数来创建一个对象,下面代码创建了一个person对象,并用两种方式打印出了Name的属性值. var person = new Object(); person.name="kevin"; person.age=31; alert(person.name); alert(person["name"]) 2. 使用对象字面量创建一个对象:不要奇怪person["5&

初探JavaScript(二)——JS如何动态操控HTML

除去五一三天,我已经和<JavaScript Dom编程艺术>磨合了六天,第一印象很好.慢慢的,我发现这是一块排骨,除了肉还有骨头.遇到不解的地方就会多看几遍,实在不懂的先跳过,毕竟,初次接触JS,没有必要花费过多时间去钻死胡同,先混个脸熟,以后再来拜访也未尝不可嘛.就这样,踉踉跄跄.囫囵吞枣似的已经过五关斩六将,到达第十一章. 书中有几个章节并没有从语法.技术等层面介绍JavaScript,而是站在一个全局的角度,立足编程原则和习惯道破了我们该如何看待和使用这门语言,主要有以下几点: Jav

Head first javascript(二)

three basic data types text number boolean 变量 var var_name; 用'='初始化变量 var var_name = ini_value; const (不是所有浏览器都支持const) const const_name = ini_value; nan: not a number 使用一些未初始化的变量进行计算的时候会产生nan,如: const unknown; total = (1 + 2) * unknown; 这里total在计算的时

Ext JS学习第三天 我们所熟悉的javascript(二)

•javascript之函数 •对于Ext开发者,我还是希望你能对javascript原生的东西非常了解.甚至熟练掌握运用.那么函数,无疑是非常重要的概念.首先在前面一讲,我们知道了函数也是一种数据类型,创建函数一共有三种方式.每种方式他们都会有区别,分别为: –function语句形式 –函数直接量形式 –构造函数形式 •函数中的arguments对象 –argument的作用一:接受函数的实际参数 –argument的作用二:用于做递归操作 栗子代码 1 //Function 函数 2 //

Javascript创建对象方法

1.工厂模式:及时由一个工厂类根据传入的参数决定生产那种产品类 function createPerson(name,age,job) { var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function() { alert(this.name); } return o; } var person = createPerson("xiaoqiang",12,"student&

Javascript生成二维码(QR)

网络上已经有非常多的二维码编码和解码工具和代码,很多都是服务器端的,也就是说需要一台服务器才能提供二维码的生成.本着对服务器性能的考虑,这种小事情都让服务器去做,感觉对不住服务器,尤其是对于大流量的网站,虽然有服务器端缓存,毕竟需要大量的CPU运算时间,这或多或少也是很大的一块压力.所以就想,有没有一种不靠服务器,就只靠JS就生成二维码呢,毕竟二维码就是一堆黑白点而已.我也没有刻意去找网络上是否已经存在这样的解决方案,而且自己一直想深入分析二维码的生成细节,现有的项目也有这样的需求,于是我自己研

Javascript 创建对象方法的总结

最近看了一下<Javascript高级程序设计(第三版)>,这本书很多人都推荐,我也再次郑重推荐一下.看过之后总得总结一下吧,于是我选了这么一个主题分享给大家. 使用Javascript创建对象的方法有很多,现在就来列举一下: 1. 使用Object构造函数来创建一个对象,下面代码创建了一个person对象,并用两种方式打印出了Name的属性值. var person = new Object(); person.name="kevin"; person.age=31; a

【译】JavaScript 创建对象: 方法一览与最佳实践

本文是我在众成翻译上认领并翻译的:JavaScript 创建对象: 方法一览与最佳实践 在JavaScript中“创建对象”是一个复杂的话题.这门语言提供了很多种创建对象的方式,不论新手还是老手都可能对此感到无所适从,不知道应该选择哪一种.不过,尽管创建对象的方法很多,看上去语法差异也很大,但实际上它们的相似性可能比你所以为的要多.本文将带领你踏上一段梳理对象创建方法的旅程,为你揭示不同方法之间的依赖与递进关系. 对象字面量 我们的第一站毫无疑问就是创建对象最简单的方法,对象字面量.JavaSc