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. poj 1094 Sorting It All Out_拓扑排序
			
    题意:是否唯一确定顺序,根据情况输出 #include <iostream> #include<cstdio> #include<cstring> #include ...
    
			
    2. 
						
  2. 步步学LINQ to SQL:为实体类添加关系【转】
			
    [IT168 专稿]本文详细为你阐述了如何在你的应用程序中实现LINQ to SQL.附件的示例程序包括了这里探讨的所有代码,还提供了一个简单的WPF图形界面程序来显示通过数据绑定返回的结果集. 第一 ...
    
			
    3. 
						
  3. 找出诡异的Bug：数据怎么存不进去
			
    带着学生做课程设计.程序一大,课程中做过了小项目,练过了分解动作,一到合起来了,难免还是要乱了分寸.事实上,实战的功夫,就是这样出来的.(课程设计指导视频链接(第36课时,3.18 银行系统开发).课 ...
    
			
    4. 
						
  4. 小心ThreadLocal的陷阱
			
    ThreadLocal用在多线程时保存线程级的局部变量,当我们需要在线程内共享数据时,ThreadLocal屡试不爽,但是ThreadLocal也会有一个问题,当你使用线程池时,线程可能会被重用,所以 ...
    
			
    5. 
						
  5. PictureBox从本地上传图片和保存在磁盘目录
			
    private void mypicbox_Click(object sender, EventArgs e) { try { OpenFileDialog ofdPic = new OpenFile ...
    
			
    6. 
						
  6. js统计字符串，并且判断出现次数最多的
			
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
			
    7. 
						
  7. AWS之EC2远程登录
			
    网上有丰富的免费资源,Amazon的云主机就是开发者和学习者很好的选择. 但你得有一张信用卡,注册个AWS(Amazon web service)账号,就可以有自己公网ip的服务器了!!! 最近在折腾 ...
    
			
    8. 
						
  8. node.js介绍
			
    官网说明: Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable  ...
    
			
    9. 
						
  9. Java - 字符串和Unicode互转 - 解析小米pm.min.js
			
    小米JS地址: http://p.www.xiaomi.com/zt/20130313/huodong/pm.min.js 上面这个JS是小米抢手机页面的代码.和抢手机有直接关联.. 虽然我3次都没抢 ...
    
			
    10. 
						
  10. C语言的本质（8）——副作用与顺序点
			
    C 语言中,术语副作用是指对数据对象或者文件的修改.例如以下语句 var = 99; 的副作用是把 var 的值修改成 99.对表达式求值也可能产生副作用,例如: se = 100 对这个表达式求值所 ...
    
			
    11.