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

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

阅读更多
   前面的两篇已经介绍了对象的定义和类的实现方法,现在开始学习面向对象中一个很重要的特性:继承。要用ECMAScript实现继承机制,首先从基类入手。所有开发者定义的类都可以作为基类,但出于安全原因的考虑,本地类和宿主类不作为基类,防止这些代码被恶意攻击。
    虽然在ECMAScript中没有java中那样严格定义的抽象类,但有时也可以创建一些不允许访问的类,作为ECMAScript中的抽象类。子类可以像java中那样继承超类的所有属性和方法,包括构造函数及方法实现;子类也可以覆盖超类中的属性和方法,添加超类中没有的属性和方法。
    实现继承的方式多种多样,就像定义一个类一样,开发者可以自由的选择,下面还是从实现继承的各种方式说起。

1、对象冒充
    构造原始的ECMAScript时,根本没有打算设计对象冒充(object masquerading),它是在开发者理解函数的工作方式,尤其是如何在函数环境中使用this关键字后发展出来的。
    其基本原理如下:构造函数使用this关键字给所有属性和方法赋值(即采用类声明的构构造函数方式)。因为构造函数只是一个函数,所以可以使Person的构造函数成为Student的方法,然后调用它。Student就会收到Person的构造函数中定义的属性和方法。例如:
  function Person(sName){
    this.name = sName;

    this.sayName = function(){
      alert("name is " + this.name);
    };
  }

  function Student(sName,sSubject){
    this.newMethod = Person;
    this.newMethod(sName);
    delete this.newMethod;

    this.subject = sSubject;
    this.saySubject = function(){
      alert("Subject is " + this.subject);
    };
  }
  var s1 = new Student("yzl","computer science");
  s1.sayName();
  s1.saySubject();

    这段代码中,为Person赋予了方法newMethod(指向类Person构造函数的指针)。然后用Student中的构造函数调用该方法,并将参数sName传递给newMethod。其后的一行代码删除了对Person的引用,这样以后就不能调用它。
*所有新的属性和方法都必须在删除了新方法的代码行后定义,否则可能覆盖超类中的相关属性和方法。
    利用对象冒充可以做一件比较有趣的事情:多重继承。例如,如果存在两个类ClassX和ClassY,ClassZ要继承这两个类,可以使用以下的代码实现:
  function ClassZ(){
    this.newMethod = ClassX;
    this.newMethod();
    delete this.newMethod;

    this.newMethod = ClassY;
    this.newMethod();
    delete this.newMethod;
  }

    回想一下第一篇中说的javascript中没有重载的原因,可以看到这其中存在一个弊端,如果ClassX和ClassY含有相同的属性或者方法,那么后者ClassY具有更高的优先级。

2、call()方法
    call()方法是与经典的对象冒充方法最相似的方法。它的第一个参数用作this对象。其他参数直接传递给函数自身。例如:
  function sayInfo(sJob,sSex){
    alert("My name is " + this.name + ", my job is " + sJob + ", sex is " + sSex);
  }
  var p1 = new Object;
  p1.name = "yzl";
  sayInfo.call(p1,"J2EE Developer","male");
// output: My name is yzl,my job is  J2EE Developer,sex is male

    在这个例子中,函数sayInfo()在对象外定义,即使它不属于任何对象,也可以引用关键字this。根据call()方法的作用,可以知道p1就是this指向的对象,所以p1将name属性传递给了函数,后面的两个参数则分别对应了函数的参数列表,最后可以在页面中显示:My name is yzl,my job is  J2EE Developer,sex is male。
    根据call()方法的作用,可以将对象冒充中的类Student进行改写,修改代码如下:
  function Person(sName){
    this.name = sName;

    this.sayName = function(){
      alert("name is " + this.name);
    };
  }
  function Student(sName,sSubject){
    //this.newMethod = Person;
    //this.newMethod(sName);
    //delete this.newMethod;
    [color=red]Person.call(this,sName);[/color]

    this.subject = sSubject;
    this.saySubject = function(){
      alert("Subject is " + this.subject);
    };
  }
  var s1 = new Student("yzl","computer science");
  s1.sayName();
  s1.saySubject();

   代码中想让对象Person中的this关键字指向对象Student,因此call()方法的第一个参数选择了this。

3、apply()方法
    apply()方法就像call()方法一样有两个参数,第一个参数依然是this指向的对象,但是第二个参数是要传递给函数的参数的数组,依然采用上面的函数定义的例子:
  function sayInfo(sJob,sSex){
    alert("My name is " + this.name + ", my job is " + sJob + ", sex is " + sSex);
  }
  var p1 = new Object;
  p1.name = "yzl";
  sayInfo.apply(p1,new Array("J2EE Developer","male"));
  // output: My name is yzl,my job is  J2EE Developer,sex is male

   回想第二篇结尾说的arguments,所以我们在使用apply()方法时还可以将arguments直接当作第二个参数传递给超类,继续修改前面的例子:
  function Person(sName){
    this.name = sName;

    this.sayName = function(){
      alert("name is " + this.name);
    };
  }
  function Student(sName,sSubject){
    //this.newMethod = Person;
    //this.newMethod(sName);
    //delete this.newMethod;
    //Person.call(this,sName);
    Person.apply(this.arguments);

    this.subject = sSubject;
    this.saySubject = function(){
      alert("Subject is " + this.subject);
    };
  }
  var s1 = new Student("yzl","computer science");
  s1.sayName();
  s1.saySubject();

   使用这种方式时,必须注意超类的参数顺序和子类的参数顺序,最好是它们的参数顺序完全一致,否则必须安排好参数的顺序。

4、原型链
    继承这种形式在ECMAScript中原本是用于原型链的。上一篇中介绍了定义类的原型方式,原型链则在它的基础上进行了扩展实现继承。基本的原理是:prototype对象是一个模板,要实例化的对象都以这个模板为基础,prototype对象的任何属性和方法都被传递给那个类的实例。
    用原型链方式重新修改前面的代码为:
  function Person(){
  }
  Person.prototype.name = "yzl";
  Person.prototype.sayName = function(){
    alert("name is " + this.name);
  };
  function Student(){
  }
  Student.prototype = new Person();
  Student.prototype.subject = "computer science";
  Student.prototype.saySubject = function(){
    alert("Subject is " + this.subject);
  }
  var s1 = new Student();
  s1.sayName();
  s1.saySubject();

    同时在原型链中instanceof运算符的方式也很特别。对于Student的实例,instanceof类Person或Student都放回true。
  alert(s1 instanceof Person);
  alert(s1 instanceof Student);

*调用超类的构造函数时,没有给它传递参数,这在原型链中是标准做法。要确保构造函数没有任何参数。
*子类的所有属性和方法必须出现在prototype被赋值之后,因为在它之前的所有属性和方法都会被覆盖。
*原型链不支持多重继承。


5、混合方式
    在上一篇中已经说过创建类的最好方式是用构造函数方式定义属性,用原型方法定义方法。这种方式同样适用于继承机制,用对象冒充继承构造函数属性,用原型链继承prototype对象的方法。用混合方式改写前面的代码:
  function Person(sName){
     this.name = sName;
  }
  Person.prototype.sayName = function(){
    alert("name is " + this.name);
  };

  function Student(sName,sSubject){
    Person.call(this,sName);
    this.subject = sSubject;
  }
  Student.prototype = new Person();
  Student.prototype.saySubject = function(){
    alert("Subject is " + this.subject);
  }

  var s1 = new Student("yzl","computer science");
  s1.sayName();
  s1.saySubject();


    这三篇javascript面向对象编程的总结让我从根本上了解了实现javascript中的对象和类;了解了多种类的实现方式;也知道了继承的基本原理和方法,为以后的javascript编程打下了一个不错的基础。写到这里总算完了,以后如果学习到了新的东西我也会放到博客中,希望大家看了能够给一些建议,帮我纠正一些错误,谢谢。
分享到:
评论

相关推荐

    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中,变量是存储数据的容器,...

    JavaScript基础教程笔记

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

    js 笔记 javascript 学习笔记

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

    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开发打下坚实基础。

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

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

    js面向对象笔记

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

    javaScript学习笔记.rar

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

    JavaScript练习程序学习笔记.rar

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

Global site tag (gtag.js) - Google Analytics