JavaScript 中的面向对象的初步认识

上面这篇简单的记录了我对 JS面向对象实现的一点初步认识和了解，下面继续研究JS面向对象，实现继承和多态。

之前的学习我了解到了 ：构造函数加属性，原型prototype加方法，这样就实现了JS的面向对象。所以当我们实现继承的时候，应该也分
属性 和 方法 两个部分实现。

说到继承 首先应该对构造函数开始下手 。现在有这样一个构造函数：

function Person(name){

     this.name = name;

};

Person.prototype.say = function (){

     console.log(this.name +" say hello~");

}

下面创建一个继承Person的Student对象，就得这样写Student的构造函数，才可以让Student获得Person的属性

<pre name="code" class="javascript">        function Student(name,age){

            Person.call(this,name);//将Student的this,传入到Peson中去

        }


上面那句 Person.call(this,name),实际上改变了 Person的作用域 ，将他替换成了 Student的，这样才是算Stuent继承了Person的属性。


关于 this ,call() 这方面的一些内容，以后会详细分析。。。 这里先大概了解他们代表什么 有什么作用就行。。。


接下来就是从 prototype 上继承 方法。（我讨厌叫它原型。。）


要是想让 Student 拥有 Person的方法，而且Person的方法全都是在它的prototype上。所以，要实现所谓方法的继承，其实就是让Student拥有和Person一样的prototype。


但是如果我们这样写


B.prototype = A.prototype;


看上去是让B 有了A一样的prototype，其实这样并不能满足继承的要求。


因为JS中存在引用这个概念，上面的操作其实是让B的prototype 和 A的prototype 指向了同一块内存区域（我的理解 =。=），如果你要修改了B的prototype，A的prototype其实也被修改了，这样就没法满足重写和拓展自己的方法这样操作。（具体的要了解JS中的引用=。=）


所以得这写样


        for(var i in A.prototype){

            B.prototype[i] = A.prototype[i];

        }


这样就满足B拥有了和A一样的prototype并且他们互相是独立的，也就可以实现方法的继承了。


现在把两个方面总结起来写个例子


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        function Person(name){

            this.name = name;

        };

        Person.prototype.say = function (){

            console.log(this.name +" say hello~");

        }

        function Student(name,age){

            Person.call(this,name);

        }

        for(var i in Person.prototype){

            Student.prototype[i] = Person.prototype[i];

        }

        //重写say 方法

        Student.prototype.say = function(){

            console.log(this.name +" is a Student");

        }

        Student.prototype.study = function(){

            console.log(this.name +" is studying");

        }

        var tom = new Person('tom');

        var jerry = new Person('jerry');

        var danny = new Student("danny");

        tom.say();

        jerry.say();

        danny.say();

        danny.study();

        tom.study();

    </script>

</head>

<body>

</body>

</html>


2015.12.30
												


											
javascript 面向对象的继承的实现的更多相关文章
	

    
						
  1. JavaScript面向对象(三)——继承与闭包、JS实现继承的三种方式
		
      前  言 JRedu 在之前的两篇博客中,我们详细探讨了JavaScript OOP中的各种知识点(JS OOP基础与JS 中This指向详解 . 成员属性.静态属性.原型属性与JS原型链).今天 ...
    
		
    2. 
						
  2. Javascript 面向对象编程—继承和封装
		
      前  言 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类) ...
    
		
    3. 
						
  3. javascript面向对象中继承实现？
		
    面向对象的基本特征有:封闭.继承.多态. 在javascript中实现继承的方法: 1.原型链(prototype chaining) 2.call()/apply() 3.混合方式(prototyp ...
    
		
    4. 
						
  4. 【前端学习】javascript面向对象编程(继承和复用)
		
    前言       继承,代码复用的一种模式.和其它高级程序语言相比,javascript有点点不一样,它是一门纯面向对象的语言,在JS中,没有类的概念,但也可以通过原型(prototype)来模拟对象 ...
    
		
    5. 
								
  5. javascript面向对象：继承、多态
		
    继承 js中同样可以实现类的继承这一面向对象特性,继承父类中的所有成员(变量和属性),同时可扩展自己的成员,下面介绍几种js中实现继承的方式: 1,对象模仿:通过动态的改变 this 指针的指向,实现 ...
    
		
    6. 
						
  6. Javascript面向对象之继承
		
    与类的创建篇一样,这里先贴出最终代码,再做详细分析: // 创建一个父类 function SuperType(){ this.company = 'alibaba'; } function SubT ...
    
		
    7. 
						
  7. javascript面向对象事件继承
		
    继承:父类有的,子类也有.父类改变,子类也跟着变. 属性继承:      矫正this (window对象,矫正成object对象)     fn .call(this是谁,参数1,参数2...);  ...
    
		
    8. 
						
  8. Javascript 面向对象之继承
		
    本文参考书籍<<Javascript高级程序设计>> js继承方式:实现继承,主要依靠原型链实现. 原型链:基本思想:利用原型让一个引用类型继承另一个引用类型的属性和方法. 这 ...
    
		
    9. 
						
  9. javascript 面向对象(实现继承的几种方式)
		
     1.原型链继承 核心: 将父类的实例作为子类的原型 缺点:  父类新增原型方法/原型属性,子类都能访问到,父类一变其它的都变了 function Person (name) { this.name  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. HTML标签实现图片滚动显示
			
    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
    
			
    2. 
						
  2. 命名空间“Aspose”中不存在类型或命名空间名称“Slides”。
			
    有可能引用的dll与项目的 .netFramework版本不同,需要确认两个版本是否相同.如果不同,项目右键->属性->应用程序.选择和引用的dll相同的版本.
    
			
    3. 
						
  3. DEDE列表页调用TAG标签
			
    [field:id function=GetTags(@me)/] 标签就可以调用出来了 只不过不带连接的,如果需要连接,请注释include\helpers\archive.helper.php文件 ...
    
			
    4. 
						
  4. 2014：超越炒作，进入部署SDN的时代
			
    2013 年,我们看到了非常多新的SDN 产品.体系结构.营销活动和各种会议,一些新的标准和开源组织也进入了这个领域.当时的SDN 刚刚从炒作周期的高点回归下来.转眼到了2014 年,这一年我们会看到 ...
    
			
    5. 
						
  5. 8位（bit）=1字节（Byte)
			
    8位(bit)=1字节(Byte),1024字节=1KB: 提到了字节,不得不再提到“字”这个计量单位:“字”由若干个字节构成,字的位数叫做字长,字长就是说字所对应的二进制数的长度.不同的机器有不同的 ...
    
			
    6. 
						
  6. 【贪心+背包】【HDU2546】【饭卡】
			
    饭卡 Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submiss ...
    
			
    7. 
						
  7. C# MySQL数据库的备份 还原 初始化
			
    // 执行创建数据库操作 this.GetExecute(G_Con, "create database if not exists NEWDB"); this.sqlAddres ...
    
			
    8. 
						
  8. php  get_magic_quotes_gpc()    addslashes()
			
    最近学了学PHP,看到这段代码 function daddslashes($str){       return (!get_magic_quotes_gpc())?addslashes($str): ...
    
			
    9. 
						
  9. T-SQL事务
			
    事务 订火车票的时候,下一个订单,这个订单中,包含多个购买信息,要么全部执行,要么全部不执行,合作事务就是来处理这种模型的一种机制. --关键字:transaction 或 tran 简写形式 --开 ...
    
			
    10. 
						
  10. ChildNodes详解及其兼容性处理方式
			
    写在前面:在做insertBefore插入节点练习时发现一个问题,插入childNodes[0]和childNodes[1]时插入的位置是一样的!于是有了childNodes的了解,有了这篇文章,欢迎 ...
    
			
    11.