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. 网易云课堂_Linux操作系统入门（嵌入式开发零基础Ⅰ）_章节4:SHELL 环境
			
    课时44命令别名 命令别名 命令别名的概念: 命令别名的查看:alias 命令别名的设置:alias myls='ls -a' 课时45通配符 通配符 通配符都概念: 通配符是代表字符通用匹配的一种系 ...
    
			
    2. 
						
  2. 在ASP.NET项目中使用CKEditor
			
    CKEditor是什么 CKEidtor是一个在线富文本编辑器,可以将让用户所见即所得的获得编辑在线文本,编辑器或自动将用户编辑的文字格式转换成html代码. 在ASP.NET工程中添加CKEdito ...
    
			
    3. 
						
  3. 教你如何理解SQL
			
    1. SQL 是一种声明式语言 首先要把这个概念记在脑中:“声明”. SQL 语言是为计算机声明了一个你想从原始数据中获得什么样的结果的一个范例,而不是告诉计算机如何能够得到结果.这是不是很棒? (译 ...
    
			
    4. 
						
  4. php之Cookie与Session详解
			
    Cookie管理 Cookie是在HTTP协议下,通过服务器或脚本语言可以维护客户浏览器上信息的一种方式,Cookie的使用很普遍,许多提供个人化服务的网站都是利用Cookie来区别不同用户,以显示与 ...
    
			
    5. 
						
  5. 用ul、li做横向导航
			
    /* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */ div.menu ul { list-style:none; /* 去掉ul前面的符号 */ margin: ...
    
			
    6. 
						
  6. GitBook是一个命令行工具（Node.js库），我们可以借用该工具使用Github/Git和Markdown来制作精美的图书，但它并不是一本关于Git的教程哟。
			
    GitBook是一个命令行工具(Node.js库),我们可以借用该工具使用Github/Git和Markdown来制作精美的图书,但它并不是一本关于Git的教程哟. 支持输出多种格式 GitBook支 ...
    
			
    7. 
						
  7. OC——NSString和NSMutableString
			
    int main(int argc, const char * argv[]) { @autoreleasepool { //----------------NSString------------- ...
    
			
    8. 
						
  8. Django模板-在视图中使用模板
			
    之前我们已经有了自己的视图mysite.views.py中,应该是这样子的 from django.http import HttpResponse import datetime def curre ...
    
			
    9. 
						
  9. raspberrypi VNC server
			
    安装apt-get install tightvncserver tightvnc-java 启动vncserver -name vnc_raspi -depth 24 -geometry 800x6 ...
    
			
    10. 
						
  10. Oracle EBS-SQL (WIP-11):检查期间任务完工记录数.sql
			
    select        WE.WIP_ENTITY_NAME                 任务名称,        WDJ.class_code                         ...
    
			
    11.