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. Easyui treegrid复选框设置
			
    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
    
			
    2. 
						
  2. CSS 定位 (Positioning)学习
			
    最近被css的定位要搞疯了...下面我总结一下最近学习东西. 先介绍几个概念: 块框:div.h1 或 p 元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框”. 行内框:与之相反,sp ...
    
			
    3. 
						
  3. struts2.3.15.3中动态方法调用默认是关闭的
			
    初学ssh,用的struts2.3.15.3,使用了如下表单: <form action="/spring3/index/login.action" method=" ...
    
			
    4. 
						
  4. IIS出现Server Application Unavailable的解决办法
			
    在XP中IIS5.1服务器,运行asp.net出现Server Application Unavailable,经过多次查证,才发现是因为先安装了.net Framework 2.0然后安装IIS,导 ...
    
			
    5. 
						
  5. windows server 2003进行相邻磁盘扩容（server 2008的直接右键就可以解决）
			
    vCenter下的win server 2003 的D盘需要扩容,解决办法是,先将D盘由原来的200GB增加到了2TB(win server 2003选择MBR的限制),重启win server 20 ...
    
			
    6. 
						
  6. android 7.0带来的
			
    Android 7.0 给开发者带来了什么 新的 Andorid N (Andorid 7.0)预览版发布了,但是新的Android预览版需要我们在已存在的APP上测试几乎全部内容,包括不同种类的屏幕 ...
    
			
    7. 
						
  7. C语言的ELF文件格式学习
			
    最近的lab里面有ELF文件相关的,所以成这个几乎,学点ELF的东西. ELF,是一种文件格式.暂时,只看可执行文件的ELF文件格式. 首先,给出文件的格式的布局图: 光看这个很难理解,所以写一个小的 ...
    
			
    8. 
						
  8. ASP.Net引用类库出现问题 二
			
    一:引用mysql.data.dll出现,问题? error: Package MySql.Data (.NETCoreApp,Version=v1.). Package MySql.Data sup ...
    
			
    9. 
						
  9. accordion
			
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
			
    10. 
						
  10. TensorFlow 深度学习笔记 Logistic Classification
			
    Logistic Classification Github工程地址:https://github.com/ahangchen/GDLnotes 欢迎star,有问题可以到Issue区讨论 官方教程地 ...
    
			
    11.