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. [置顶] Ajax核心--XMLHttpRequest对象
			
    XMLHttpRequest 对象是AJAX功能的核心,学习XMLHttpRequest对象就先从创建XMLHttpRequest 对象开始,了解在不同的浏览器中创建XMLHttpRequest 对象 ...
    
			
    2. 
						
  2. Create local metadata resource of yum
			
    Today, I need install an oracle software for a machine whose os is Linux. As we all know, installing ...
    
			
    3. 
						
  3. Flash Recovery Area
			
    1. 设置闪回恢复区 闪回恢复区主要通过3个初始化参数来设置和管理 db_recovery_file_dest:指定闪回恢复区的位置db_recovery_file_dest_size:指定闪回恢复区 ...
    
			
    4. 
						
  4. SecureCRT中文显示乱码的解决方法
			
    注:本文出自:http://riching.iteye.com/blog/349754 最近开始用SecureCRT登陆linux系统,由于是新手,很多问题不清楚,碰到显示中文乱码的问题,困扰了好几天 ...
    
			
    5. 
						
  5. WCF学习心得
			
    之前很经常听说WCF,不过没有怎么接触过,直到最近才真正使用到WCF,虽然也只是皮毛而已,在此也做个记录总结吧. 下图是我使用WCF的练手项目,由于是使用VS2010直接创建的WCF服务应用程序,VS ...
    
			
    6. 
						
  6. 手机不支持onchange事件
			
    今天,微信上用input type=date来计算日期,苹果上可以,我的小米2s手机死活不触发onchange,大三星的onchange效果怎么看都是onblur.听燕哥说,这事儿,得折腾. 搞来搞去 ...
    
			
    7. 
						
  7. Linux 脚本整理
			
    本页主要用来记录一点 Shell 脚本. 1. cd - #切换回上一次的路径 这个命令对 cd 频繁的操作很有用 2. sudo !! #授权给上次录入的命令 比如一般非 root 用户在执行 if ...
    
			
    8. 
						
  8. 总结PHP中几种常用的网页跳转代码
			
    网页跳转的意思就是指当你在浏览器中访问A页面时,会自动跳转到B页面,往往网页跳转用在404页面中会比较多点.至于怎么实现网页跳转,网上已经提供了很多的方法,有些方法是不可行的,经过测试,叶德华今天就在 ...
    
			
    9. 
						
  9. MFC对话框中解决回车键、ESC键退出的方法
			
    BOOL CYourDlg::PreTranslateMessage(MSG* pMsg) { if(pMsg->message==WM_KEYDOWN&&pMsg->wP ...
    
			
    10. 
						
  10. 机器学习(Machine Learning)
			
    从wiki开始:http://en.wikipedia.org/wiki/Machine_learning 今天看机器学习相关的文章, 了解了一下opencv中机器学习功能比较多了 (http://d ...
    
			
    11.