工厂模式:
function createPerson(name,age,job){ var o = {}; o.name = name; o.age = age; o.job = job; o.sayName = function(){ alert(this.name); }; return o; } var tanya = createPerson("tanya","30","female"); var ansel = createPerson("ansel","30","male"); tanya.sayName(); ansel.sayName();
这里先定义o为一个空的对象,然后为o设置了一堆属性。其实也可以直接给o属性的嘛,所以如果这样写也是ok的。
function createPerson(name,age,job){ var o = { name : name, age : age, job : job, sayName : function(){ alert(this.name); } }; return o; } var tanya = createPerson("tanya","30","female"); var ansel = createPerson("ansel","30","male"); tanya.sayName(); ansel.sayName();
还有一种办法是利用无敌的this,因为this就表示当前运行时的对象,将构造函数this的作用域指向新对象,将当前运行对象的属性和方法都赋给新对象,这样对象模式称为构造函数模式
function Person(name,age,job){ this.name = name; this.age = age; this.job = job; this.sayName = function(){ alert(this.name); }; } var tanya = new Person("tanya","30","female"); var ansel = new Person("ansel","30","male"); tanya.sayName(); ansel.sayName();
在这个例子中,tanya和ansel都有一个constructor属性,该属性指向person。
考虑一下如下的情况:
function Person(name,age,job){ this.name = name; this.age = age; this.job = job; this.sayName = function(){ alert(this.name); }; } Person("tanya","30","female"); Person("ansel","30","male"); window.sayName(); window.sayName();
发现两次弹出的都是ansel,这是因为不用new的话,就不是一个person的实例,而仅仅在执行函数。而在全局作用域调用一个函数时this总是指向Global对象。而Global对象在浏览器中就是window对象。
我们还可以用构造模式在另外一个对象中调用sayName方法,还记得Apply和call么,来吧再考虑另外一种情况,
function Person(name,age,job){ this.name = name; this.age = age; this.job = job; this.sayName = function(){ alert(this.name); }; } var olivia = {}; Person.call(olivia,"tanya","30","female"); olivia.sayName(); var philip = {} Person.apply(philip,["ansel","30","male"]); philip.sayName();
原型模式就要考虑原型链了,分析一下,sayName方法在实例中被重复定义了两次,但其实没有必要创造两个一样的副本。使用原型方法,可以使是tanya和ansel的共享一个sayName方法。
于是原型模式的写法如下:
function Person(name,age,job){ this.name = name; this.age = age; this.job = job; } Person.prototype.sayName= function(){ alert(this.name); }; var tanya = new Person("tanya","30","female"); var ansel = new Person("ansel","30","male"); tanya.sayName(); ansel.sayName();
实际应用时,不是一成不变的套用某种模式,活学活用。需要共享方法的时候就用原型模式,需要使用副本的时候就用构造模式,还可以结合起来,把所有信息都封装在构造函数中,而通过在构造函数中初始化原型,使得对象保持了同时使用构造函数和原型的优点
function Person(name,age,job){ this.name = name; this.age = age; this.job = job; if (typeof sayName != "function" ){ Person.prototype.sayName= function(){ alert(this.name); }; } } var tanya = new Person("tanya","30","female"); var ansel = new Person("ansel","30","male"); ansel.sayName = function () { alert("Hi ansel, how hansome you are!"); } tanya.sayName(); ansel.sayName();
相关推荐
在提供的资源中,《代码之美》PDF文件可能包含了关于编程实践和代码风格的指导,而《Javascript面向对象编程》PPT可能更具体地阐述了JavaScript OOP的细节和示例。学习这些材料将有助于深入理解JavaScript的面向对象...
JavaScript作为一门浏览器语言的核心思想;面向对象编程的基础知识及其在... 《JavaScript面向对象编程指南》着重介绍JavaScript在面向对象方面的特性,展示如何构建强健的、可维护的、功能强大的应用程序及程序库
《JavaScript面向对象编程指南》内容包括:JavaScript作为一门浏览器语言的核心思想;面向对象编程的基础知识及其在JavaScript中的运用;数据类型、操作符以及流程控制语句;函数、闭包、对象和原型等概念,以代码...
JavaScript面向对象编程是一种基于原型(Prototype)的编程范式,它是动态类型语言,允许开发者创建具有复杂特性的对象。在JavaScript中,面向对象主要通过构造函数、原型链和闭包来实现。以下是对这一主题的详细...
JavaScript是一种广泛...通过深入学习这本《JavaScript面向对象编程指南(第2版)》,开发者不仅能掌握JavaScript的面向对象编程基础,还能了解到实际项目中如何有效地运用这些知识,提升编程技巧和解决问题的能力。
javascript面向对象编程培训教程PPT
总而言之,学习现代JavaScript面向对象编程,有助于开发者在认识这门语言演化的基础上,运用面向对象的设计和编程模式来构建更加健壮和可维护的JavaScript应用程序。同时,测试和调试是保证代码质量不可或缺的环节,...
下面将详细探讨JavaScript面向对象编程的基本原理、特性以及实际应用。 1. **类与对象** - 在JavaScript中,对象是键值对的集合,可以通过字面量语法或构造函数创建。例如: ```javascript const person = { ...
JavaScript面向对象编程指南是完整的扫描版...
JavaScript面向对象编程.pdf
javascript面向对象编程指南 2nd英文版,英文名:Object-Oriented JavaScript。 What you will learn from this book The basics of object-oriented programming, and how to apply it in the JavaScript ...
JavaScript 面向对象 编程指南 完整扫描版
JavaScript面向对象编程指南完整版是扫描的....