`
frederick_hai
  • 浏览: 15544 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

javascript面向对象编程

阅读更多

在javascript中最简单的创建一个对象的方式如下:

 

var person = new Object();
person.name = "海绵宝宝";
person.age = 27;
person.job = "software engineer";
person.sayName = function(){
     alert(this.name);
}
person.sayName();

 

 工厂模式,如下所示:

 

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("Frederick",27,"software engineer");
person.sayName();

 

 构造函数模式,如下所示:

 

function Person(name,age,job){
      this.name = name;
      this.age = age;
      this.job = job;
      this.sayName = function(){
             alert(this.name);
      }
}
var person1 = new Person("海绵宝宝",27,"software engineer");
var person2 = new Person("Frederick","29","Manager");
person1.sayName();//海绵宝宝
person2.sayName();//Frederick

  上面的构造函数模式有个缺点,每个方法都要在创建每个实例时重新创建一遍,如上person1和person2都有一个名为sayName()的方法,但是两个方法不是同一个Function实例。简单的改进方法如下:

 

function Person(name,age,job){
     this.name = name;
     this.age = age;
     this.job = job;
     this.sayName = sayName;
}
function sayName(){
      alert(this.name);
}
var person1 = new Person("海绵宝宝",27,"software engineer");
var person2 = new Person("Frederick",29,"Manager");
person1.sayName();//海绵宝宝
person2.sayName();//Frederick

 上面改造之后我们把sayName放到了构造函数之外,在构造函数内部person1和person2通过指针引用指向了全局的sayName()方法,这样一来person1和person2就共享了全局的sayName()方法。这样做同样有缺点——多出了一个名不副实的全局函数,如果对象的方法很多就会有很多这样的全局函数,为了解决这些问题可以采用下面的原型模式。

原型模式,如下所示:

 

function Person(){}
Person.prototype.name = "海绵宝宝";
Person.prototype.age = 27;
Person.prototype.job = "software engineer";
Person.prototype.sayName = function(){
     alert(this.name);
}
var person1 = new Person();
person1.sayName();

var person2 = new Person();
person2.sayName();

 上面的方式显然还不够好,所有的实例都共享相同的信息,为此我们可以再改造一下。

组合使用构造函数模式和原型模式,如下所示:

 

function Person(name,age,job){
      this.name = name;
      this.age = age;
      this.job = job;
      this.friends = ['Tom','Jerry'];
}
Person.prototype = {
    constructor: Person,
    sayName: function(){
          alert(this.name);
    }
}
var person1 = new Person("海绵宝宝",27,"software engineer");
var person2 = new Person("Frederick",29,"Manager");
person1.friends.push("Nancy");
alert(person1.friends);//Tom,Jerry,Nancy
alert(person2.friends);//Tom,Jerry
alert(person1.sayName == person2.sayName);//true
 

 

分享到:
评论

相关推荐

    Javascript面向对象编程.

    在提供的资源中,《代码之美》PDF文件可能包含了关于编程实践和代码风格的指导,而《Javascript面向对象编程》PPT可能更具体地阐述了JavaScript OOP的细节和示例。学习这些材料将有助于深入理解JavaScript的面向对象...

    JavaScript面向对象编程指南.pdf

    JavaScript作为一门浏览器语言的核心思想;面向对象编程的基础知识及其在... 《JavaScript面向对象编程指南》着重介绍JavaScript在面向对象方面的特性,展示如何构建强健的、可维护的、功能强大的应用程序及程序库

    JavaScript面向对象编程指南

    《JavaScript面向对象编程指南》内容包括:JavaScript作为一门浏览器语言的..., 《JavaScript面向对象编程指南》着重介绍JavaScript在面向对象方面的特性,展示如何构建强健的、可维护的、功能强大的应用程序及程序库。

    JavaScript面向对象编程指南(第2版).rar

    JavaScript是一种广泛...通过深入学习这本《JavaScript面向对象编程指南(第2版)》,开发者不仅能掌握JavaScript的面向对象编程基础,还能了解到实际项目中如何有效地运用这些知识,提升编程技巧和解决问题的能力。

    Javascript面向对象编程

    ### JavaScript面向对象编程详解 #### 一、引言 JavaScript作为一种广泛使用的脚本语言,在Web开发领域占据着举足轻重的地位。尽管JavaScript本质上是一种基于原型的语言,但它也支持面向对象编程的一些特性,使得...

    javascript面向对象编程.pdf

    总而言之,学习现代JavaScript面向对象编程,有助于开发者在认识这门语言演化的基础上,运用面向对象的设计和编程模式来构建更加健壮和可维护的JavaScript应用程序。同时,测试和调试是保证代码质量不可或缺的环节,...

    JavaScript面向对象编程指南 pdf

    下面将详细探讨JavaScript面向对象编程的基本原理、特性以及实际应用。 1. **类与对象** - 在JavaScript中,对象是键值对的集合,可以通过字面量语法或构造函数创建。例如: ```javascript const person = { ...

    JavaScript面向对象编程指南完整版

    JavaScript面向对象编程指南是完整的扫描版...

    javascript面向对象编程指南 2nd

    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面向对象编程.pdf

    JavaScript面向对象编程.pdf

    JavaScript面向对象程序设计

    在JavaScript面向对象编程中,随着Web2.0和Ajax技术的普及,JavaScript的角色从简单的表单验证扩展到了复杂的数据交互和页面动态更新。采用面向对象的编程风格可以使代码结构更加清晰,便于管理和维护。例如,...

    JavaScript面向对象编程指南完整扫描版

    JavaScript 面向对象 编程指南 完整扫描版

Global site tag (gtag.js) - Google Analytics