javacript设计模式之prototype
1.函数等同于对象
函数（functions）在javascript中本身就是对象，它有方法和属性。关于函数的属性，prototype是比较重要的一个
Js代码
<body>
<script language="javascript">
function foo(a,b){
return a*b;
}
alert(typeof foo.prototype);//object
</script>
</body>
我们可以为foo.prototype添加方法和属性
foo.prototype={}
这个属性对foo函数没有任何影响，仅仅当foo作为构造函数的时候。prototype才会有意义.
2. 给prototype添加属性和方法
前几节学过的用构造函数创建对象，主要的思路还是用new操作符访问this。这个this包含了构造函数返回的对象。我们可以往this里添加属性和方法也就是，也就是给这个对象添加了属性和方法。让我们看看下列的代码
JS代码
function Gadget(name,color){
this.name=name;
this.color=color;
this.whatAreYou=function(){
return 'I am a '+this.color+' '+this.name;
}
}
添加属性和方法到prototype中，是另一种给对象添加功能的方法。让我们添加下price和rating和getInfo().
JS代码
Gadget.prototype = {
price: 100,
rating: 3,
getInfo: function() {
return 'Rating: ' + this.rating + ', price: ' + this.price;
}
};
3.调用prototype的属性和方法
所有的属性和方法都可以添加到prototype中,对于对象是直接可以访问的.如果创建了一个对象就可以访问所有的属性和方法了.
JS代码:
var newtoy = new Gadget('webcam','black');
newtoy.name;//webcam
newtoy.color;//black
newtoy.whatAreYou();//I am black webcam
newtoy.price;//100
newtoy.rating;//3
newtoy.getInfo();//Rating:3,price:100
4. 自身属性和prototype属性的对比
在上个例子中getInfo这个方法，用的是this来调用rating和price的。当然也可以用Gedget.prototype来重写这个方法
JS代码
Gadget.prototype.getInfo = function() {
return 'Rating: ' + Gadget.prototype.rating + ', price: ' + Gadget.prototype.price;
};
这个上面的方法有什么不同？首先要了解prototype更多的细节问题.
JS代码
var newtoy = new Gadget('webcam','black');
当访问newtoy.name的时候，Javascript引擎会检索这个对象的所有属性直到找到name的属性
JS代码
newtoy.name;//webcam
如果访问rating会怎么样呢？Javascript引擎首先会检索这个对象的所有属性，发现并没有叫rating这个属性。然后再去找创造这个对象的构造函数的prototype（也就是newtoy.constructor.prototype）.如果这个属性找到就返回。
JS代码
newtoy.rating;//3
当然这么访问和如下代码是一样的
JS代码
newtoy.constructor.prototype.rating;//3
5. 自身属性和prototype属性的对比
前几个例子说明了如果没有自身的属性，就会找prototype的属性。下面引出了这样一个问题，如果自身的属性和prototype的属性都一样的话，会怎么样呢。看如下代码
JS代码
function Gadget(name) {
this.name = name;
}
Gadget.prototype.name = 'foo';//foo
在创建一个新的对象
var toy = new Gadget('camera');
toy.name;//camera --------会调用自身的属性
发现了toy.name的值是camera.这就相对于prototype的name属性进行重写
JS代码
delete toy.name;//true ------这里只是删除了实例toy.name的属性,而没有Gadget.name的属性
toy.name;//foo
如果删除自身属性name,prototype的属性name就生效了
当然你可以重新创建toy的属性
JS代码
toy.name='camera';
toy.name;//camera
6这就对象的易变性
在javascript中,一切都是对象(除了那三各原始数据类型,在必要的时候也会包装成为对象),而且对象都是易变的(mutable).这意味着你能使用一些在大多数别的语言中不允许的技术,例如为函数添加属性:
JS代码
function Person(name,age) //Class Person
{
this.name=name; //构造方法里增加Person类的属性
this.age=age;
}
Person.prototype = { //通过prototype来给Person类添加getName()方法
getName: function() {
return this.name;
},
getAge: function() //为Person类添加getAge()方法
{
return this.age;
}
}
var alice=new Person('Alice',90); //创建Person类的一个实例alice
var bill =new Person('Bill',20); /创建Person类的一个实例alice
Person.prototype.getGreeting = function() {
return 'Hi'+this.getName()+'!'; //通过prototype为Person添加getGreeting()方法
};
alice.displayGreeting= function() //给alice对象添加displayGreeting()方法
{
alert(this.getGreeting());
}
alice.displayGreeting(); //HiAlice!
alert(alice.getName()); //Alice
alert(alice.getGreeting()); //HiAlice!
bill.displayGreeting(); //对象不支持此属性或方法
分享到：
相关推荐
"JavaScript设计模式与开发实践.pdf" 本书《JavaScript设计模式与开发实践》是JavaScript语言的设计模式和开发实践的指南，旨在帮助初、中、高级Web前端开发人员和想往架构师晋级的中高级程序员，掌握JavaScript...
JavaScript设计模式是编程实践中一种重要的思想，它通过总结和提炼出一套可复用的解决方案，帮助开发者解决在软件开发过程中遇到的常见问题。设计模式并不是特定的语言特性，而是跨越多种编程语言的一般性原则和最佳...
JavaScript设计模式是编程实践中一种优秀的代码组织方式，它总结了在特定场景下解决常见问题的最佳实践。构造函数模式是JavaScript中的一种重要设计模式，用于创建对象。本文将深入探讨构造函数模式及其应用。 构造...
**原型设计模式(Prototype Pattern)**是一种创建型设计模式，它允许我们通过复制现有的对象来创建新对象，而不是通过构造函数来实例化新对象。在面向对象编程中，当我们需要频繁地创建具有相同或相似属性的对象时，...
JavaScript设计模式是编程实践中的一种重要思想，它提供了一套经过时间考验的最佳实践，用来解决常见的编程问题和提高代码的可维护性、可扩展性和可复用性。在JavaScript这种动态类型的脚本语言中，设计模式尤其重要...
JavaScript设计模式详解与函数式编程是开发者提升代码质量和可维护性的重要工具。设计模式是对在软件设计中经常出现的问题和解决方案的一种模式化描述，而函数式编程则是一种编程范式，强调程序数据的不可变性和函数...
接下来，我们讨论JavaScript设计模式。设计模式是在特定场景下解决问题的通用、可重用的解决方案。在JavaScript中，常见的设计模式有： 1. **单例模式（Singleton）**：确保一个类只有一个实例，并提供一个全局访问...
6. **Class与Object继承**：Prototype.js 引入了面向对象的概念，实现了类（Class）和对象继承，使得JavaScript具备了更接近传统面向对象语言的编程模式。 7. **JSON支持**：随着JSON成为数据交换的主流格式，...
JavaScript设计模式与开发实践是深入理解JavaScript编程技巧和优化代码结构的重要资源。设计模式是软件工程中的最佳实践，它们提供了解决常见问题的通用解决方案。在JavaScript中，设计模式可以帮助我们编写可维护、...
JavaScript 设计模式中的接口是一种重要的概念，虽然JavaScript本身并不直接支持接口定义，但它可以通过模拟其他面向对象语言的接口实现方式来实现类似的功能。接口的主要作用是定义一组必须被实现的方法，确保不同...
### JavaScript设计模式之模块模式详解 #### 模块模式概述 在JavaScript开发中，模块模式是一种常见的设计模式，它提供了一种封装私有变量和公开API的方法。这种模式有助于提高代码的可维护性和可扩展性，同时保持...
### JavaScript设计模式详解 #### 一、引言 在软件工程领域，设计模式是指针对某一类问题的最佳实践或解决方案的总结。对于JavaScript开发者而言，掌握常见的设计模式不仅可以提高编程效率，还能增强代码的可维护...
**策略模式**是一种行为设计模式，它允许在运行时改变对象的行为。在JavaScript中，策略模式可以帮助我们避免使用大量的if...else或者switch语句来控制不同的行为，而是将每种行为封装成一个独立的策略类，让它们...
JavaScript设计模式是软件开发中的一个重要概念，它是一种解决特定问题的模板或最佳实践。在JavaScript中，设计模式主要关注代码的组织结构和可重用性。本篇将探讨JavaScript中的this、call和apply这三个关键知识点...
JavaScript中的装饰者模式是一种设计模式，它允许在不修改原有对象的基础上动态地扩展对象的功能。这种模式在软件工程中尤其有用，因为它可以帮助我们保持代码的灵活性、可读性和可维护性。 装饰者模式的核心思想是...