`
gteam.yu
  • 浏览: 27777 次
  • 性别: Icon_minigender_1
  • 来自: 成都
最近访客 更多访客>>
社区版块
存档分类
最新评论

[基础]JavaScript中的面向对象(个人学习笔记) 二

阅读更多
   有了第一篇的一些对对象的了解,后面学习如果来定义一个类也可以说成定义一个对象就会容易许多,废话就这么多了,继续开始学习。首先从定义对象的方式介绍。
1、工厂方式
    当要定义一个名为“人”的类时,可以简单的设想我们需要为这个人设置属性:名字还有性别。可以简单地用一下代码实现:
  var oPerson = new Object;
  oPerson.name = "yzl";
  oPerson.sex = "female";
  oPerson.sayInfo = function(){
    alert("name : " + this.name + " ,sex :" + this.sex);
  };

    这只是创建了一个简单的对象,那么如果要创建多个对象,现在就不满足了,所以引入了工厂函数,进行改装之后的代码:
  function createPerson(){
    var oPerson = new Object;
    oPerson.name = "yzl";
    oPerson.sex = "female";
    oPerson.sayInfo = function(){
      alert(" name : " + this.name + " ,sex :" + this.sex);
    };
    return oPerson;
  };
  var p1 = createPerson();
  p1.sayInfo();
  p1.name = "gcm";
  p1.sex = "female";
  p1.sayInfo(); 

   到这里看起来好像真的创建了一个人了,但是很明显能够看到不足,所有的实例的属性必须在对象创建了之后进行具体的修改,不能在对象建立时就根据具体情况创建对象。于是我们对代码进行了相关的修改,具体如下:
function createPerson(sName,sSex){
	var oPerson = new Object;
  oPerson.name = sName;
  oPerson.sex = sSex;
  oPerson.sayInfo = function(){
		alert("name : " + this.name + " ,sex :" + this.sex);
	};
	return oPerson;
};

var p1 = createPerson("yzl","male");
var p2 = createPerson("gcm","female");
p1.sayInfo();
p2.sayInfo(); 

    代码修改到这里基本上已经满足了需求,能够根据具体的情况创建不同的人。可是。。。(写到这里我突然感觉如此多的转折怎么跟春晚的魔术的托一样,大家原谅啊~),可是考虑一下内存,我们应该能够看到每次createPerson都会创建一个sayInfon()函数,即每个person都拥有自己对应的sayInfo方法,但是方法的内容都是相同的,所以应该选择更好的方式。考虑到EMCAScript是支持闭包的,所以可以将函数的定义放到类之外,让后让类的属性指向该方法的引用:
  function sayInfo(){
    alert("name : " + this.name + " ,sex :" + this.sex);
  }

  function createPerson(sName,sSex){
    var oPerson = new Object;
    oPerson.name = sName;
    oPerson.sex = sSex;
    oPerson.sayInfo = sayInfo;
    return oPerson;
  }; 
  var p1 = createPerson("yzl","male");
  var p2 = createPerson("gcm","female");
  p1.sayInfo();
  p2.sayInfo(); 

   工厂模式已经满足了需求,从不断地修改代码的过程可以看出工厂模式存在的各种问题,于是便有了更加接近java代码的构造函数方式。

2、构造函数方式
    构造函数方式和工厂模式非常的相似,只是在定义类的时候直接使用了类名,而参数的赋值使用了关键字this,也不需要返回值。直接看代码:
  function sayInfo(){
    alert("name : " + this.name + " ,sex :" + this.sex);
  }
  function Person(sName,sSex){
    this.name = sName;
    this.sex = sSex;
    this.sayInfo = sayInfo; 
  }
  var p1 = new Person("yzl","male");
  p1.sayInfo();

    这种方式其实很像工厂模式,没有多少说的东西,继续下一种定义类的方式。

3、原型方式
    该方式利用了对象的prototype属性,可以把它看成新对象所依赖的原型。采用这种方式来定义一个类的方法一般是先采用空的构造函数来设置类名,然后所有的属性和方法都被直接赋予prototype属性。参照以下代码:
  function Person(){
  }
  Person.prototype.name = "yzl";
  Person.prototype.sex = "male";
  Person.prototype.sayInfo = function(){
    alert("name : " + this.name + " ,sex :" + this.sex);
  };
  var p1 = new Person();
  p1.sayInfo();
  p1.name = "gcm";
  p1.sex = "female";
  p1.sayInfo(); 

   采用原型方式创建实例时,原型的所有属性都被立即赋予要创建的对象,所有属性看起来都属于同一个对象,其中的sayInfo方法都指向同一个引用。使用该方法定义类可以使用instranceof运算符检查实例指向的类型。
  alert(p1 instanceof Person); //true

采用原型方式存在了一个前面提到的劣势,某个实例的属性要等对象创建了之后才能根据具体的情况进行修改,这都是可以接受的。可是由于所有属性同时指向同一个引用,存在一个严重的问题,见代码:
  function Person(){
  }
  Person.prototype.name = "yzl";
  Person.prototype.sex = "male";
  Person.prototype.friends = new Array("ymj","gcm");
  Person.prototype.sayInfo = function(){
    alert("name : " + this.name + " ,sex :" + this.sex);
  };
  var p1 = new Person();
  var p2 = new Person();
  p1.friends.push("hl");
  alert(p2.friends); // ymj gcm hl

   代码中明明只修改了p1的friends属性,可是p2的friends属性也产生了变化,这是一个非常严重的错误。个人感觉就跟这种方式是线程不安全的,多个线程访问就会出错。经过这么多的修改,于是提出了更加合理的方式:联合使用构造函数和原型方式。

4、联合使用构造函数和原型方式
这种方式其实非常简单,基本的思路就是采用构造函数来定义类的属性,采用原型方式来声明类的方法。这样就可以实现所有的对象独立占有自己的属性,而且保证了所有的方法只创建一次,代码如下:
  function Person(sName,sSex){
    this.name = sName;
    this.sex = sSex;
    this.friends = new Array();
  }

  Person.prototype.makeFriend = function(newFriend){
    this.friends.push(newFriend);
  }

  Person.prototype.sayInfo = function(){
    alert("name : " + this.name + " ,sex :" + this.sex + ", and has  friends :" + this.friends );
  };
  var p1 = new Person("yzl","male");
  var p2 = new Person("gcm","female");
  p1.makeFriend("zxt");
  p2.makeFriend("gr");
  p1.sayInfo();
  p2.sayInfo();

   上面的这种方式已经很像java中创建一个对象了,这也是ECMAScript主要采用的方式。虽然还有其他几种创建类的方式,但是感觉记住最有用就可以了,其他的方式不再继续介绍,最后补充一种实现javascript重载的方法。首先必须先先了解一下Javascript中一个很重要的属性arguments,它可以记录下在调用函数时所传递的参数,也就是通过它来实现函数的重载,代码如下:(由于最近忙于换工作所以写的比较慢请大家原谅)
  function Person(sName,sSex){
    switch(arguments.length){
	case 0 :
	  this.name = "unKnown";
	  this.sex = "unKnown";
	  break;
	case 1 :
	  this.name = sName;
	  this.sex = "unKnown";
	  break;
	case 2 :
	  this.name = sName;
	  this.sex = sSex;
	  break;			
	};
  }

  Person.prototype.sayInfo = function(){
    alert("name : " + this.name + " ,sex :" + this.sex);
  };

  var p1 = new Person("yzl","male");
  var p2 = new Person("gcm");
  var p3 = new Person();
  p1.sayInfo();
  p2.sayInfo();
  p3.sayInfo();

分享到:
评论

相关推荐

    javascript面向对象学习笔记

    总结一下,JavaScript面向对象编程主要包括类的表示(通过构造函数)、对象的创建(对象工厂、构造函数、原型模式)以及继承的实现(原型链)。理解这些概念对于深入学习JavaScript和开发复杂的JavaScript应用至关...

    Javascript 面向对象程式学习笔记收藏

    在JavaScript中,面向对象编程(Object-Oriented Programming,简称OOP)是一种重要的编程范式,它允许我们通过对象和类的概念来组织代码,提高代码的可读性和可维护性。本文将深入探讨JavaScript中的面向对象编程,...

    前端JavaScript基础学习笔记案例

    个人在学习前端JavaScript时的学习笔记,内含JavaScript的中基础知识点,以及案例。里面有兼容市面上浏览器的方法 1.知识点包括:基础语法,字符串操作,object对象,DOM对象,BOM对象,offset,client,scroll对象...

    javascript学习笔记.docx

    这篇学习笔记主要涵盖了JavaScript的基础语法和客户端JavaScript的相关知识。 1. **JavaScript基本语法**: - **变量声明**:未声明的变量尝试读取时会产生错误,而写入未声明的变量会创建一个全局变量。 - **...

    JavaScript对象笔记.rar

    什么是对象 简单点说,编程语言中的对象是对现实中事物的简化。例如,我们一个人就是一个对象,但是编程...在后面的JavaScript对象笔记中,记录了菜鸟在学习JavaScript对象的大多数资源,希望这些资源对你也有价值。

    JavaScript学习笔记

    ### JavaScript面向对象基础 #### 创建对象 在JavaScript中,创建对象是进行面向对象编程的基础之一。不同于C#等其他语言,JavaScript提供了多种方式来创建对象。最常见的方式是使用`new Object()`或直接通过对象...

    JavaScript高级程序设计2,学习笔记---第一篇

    这篇学习笔记将带你探索JavaScript的核心概念,包括变量、数据类型、控制流、函数、对象和类等,这些都是构建复杂应用程序的基础。 首先,我们要了解JavaScript的基础语法。在JavaScript中,变量是存储数据的容器,...

    js 笔记 javascript 学习笔记

    本学习笔记将深入探讨JavaScript的核心概念,包括变量、数据类型、操作符、控制流程、函数、对象、数组、原型链、闭包等,并结合实际示例,如my.js、order.js、login.js等文件,来讲解其在实际项目中的应用。...

    JavaScript基础教程笔记

    #### 五、JavaScript面向对象编程 - **对象字面量**:`let obj = { key: value, method: function() {} };` - **构造函数**: - 使用`function`关键字定义构造函数。 - 使用`new`关键字实例化对象。 - **原型链**...

    JavaScript学习笔记.pdf

    紧接着第二章讲解了JavaScript对象,这是理解JavaScript面向对象编程的基础,对象的创建、属性和方法等知识点在这一章中得到了详细的解释。 第三章专注于JavaScript事件处理,事件是网页交互的核心,掌握事件的捕获...

    JavaScript 入门 新手学习笔记

    这篇"JavaScript入门新手学习笔记"提供了全面的学习资源,适合初学者系统性地掌握这一技术。 笔记可能包含了以下关键知识点: 1. **基础语法**:JS的基础包括变量(var、let、const)、数据类型(如字符串、数字、...

    javascript入门学习笔记

    这些只是JavaScript学习笔记的一部分,深入理解并熟练运用这些概念,将为JavaScript编程打下坚实的基础。随着学习的深入,还会接触到更多高级特性和框架,如闭包、原型链、AJAX、jQuery、Vue.js、React.js等,这些都...

    李立超JavaScript基础篇笔记

    4. 面向对象:基于原型,而非类。 JavaScript与网页的交互主要依赖于DOM(Document Object Model)和BOM(Browser Object Model)。DOM提供了对网页内容进行操作的对象,而BOM则允许开发者控制浏览器的某些特性,如...

    javascript学习笔记

    以上是对给定文件中JavaScript学习笔记的部分内容进行的详细解读,涵盖了JavaScript的基础知识、语法、数据类型、函数、对象、数组、DOM编程、AJAX以及JSON和jQuery的简介,旨在为初学者提供全面的入门指南。

    JavaScript学习笔记,javascript基础知识,基础语法整理.pdf

    以上就是JavaScript学习笔记的主要内容,涵盖了从基础概念到具体应用的多个方面,是深入理解和掌握JavaScript不可或缺的知识点。通过不断实践和学习,可以逐步提升JavaScript编程能力,为Web开发打下坚实基础。

    js面向对象笔记

    JavaScript 通过构造函数和原型来模拟面向对象编程中的类和实例,而通过原型链可以实现对象之间的继承关系。 总之,JavaScript 面向对象编程虽然没有传统意义上的类和继承,但是通过构造函数和原型对象,以及原型链...

    韩顺平javascript笔记(最全整理 dom编程 oop 基础语法)

    韩顺平老师的JavaScript笔记全面涵盖了基础语法、面向对象编程以及DOM编程,这些都是学习JavaScript时至关重要的知识点。 首先,基础语法是JavaScript学习的基石。包括变量声明(var、let、const)、数据类型(如...

    javaScript学习笔记.rar

    这个“javaScript学习笔记.rar”压缩包显然包含了作者在学习JavaScript过程中的心得和记录,对于初学者或者想要深入理解JavaScript的人来说,是一份宝贵的资源。 JavaScript与Java虽然名字相似,但两者实际上是不同...

    JavaScript练习程序学习笔记.rar

    原型和原型链是JavaScript继承的基础,理解这两个概念对于掌握面向对象编程至关重要。另外,ES6引入了类和模块,让JavaScript的面向对象编程更加简洁。 事件驱动编程是JavaScript的另一个关键特性,用于响应用户的...

Global site tag (gtag.js) - Google Analytics