js原型继承的两种方法对比介绍

在实际的项目中,我们通常都是用构造函数来创建一个对象,再将一些常用的方法添加到其原型对象上。最后要么直接实例化该对象,要么将它作为父类,再申明一个对象,继承该父类。

而在继承的时候有两种常用方式,今天我们就来稍作探讨

复制代码 代码如下:

//父类
 function Person(name){
    this.name = name;
};

 // 子类
 function Student(sex){
  Person.apply(this,arguments); //继承父类的构造函数
  this.sex=sex;
 };

1,继承Prototype:

复制代码 代码如下:

Student.prototype = Person.prototype; //执行完此句时,Student.prototype.constructor 指向的是Person,为什么了?因为Person.prototype.constructor指向Person,对象的赋值实质上是引用赋值,所以Student.prototype.constructor也指向Person
Student.prototype.constructor = Student;  //  将Student.prototype.constructor 指回Person

用Person的原型对象来覆盖Student的原型对象;前面说到对象的赋值实质上是引用赋值,所以如果Student.prototype上的任何修改都会体现到Person.prototype中,即子类会影响父类。

看下面:

复制代码 代码如下:

Student.prototype.add=function(){alert("add")};
Person.prototype.add();//弹出add

2,继承实例:

复制代码 代码如下:

Student.prototype = new Person();  //如果此处不传递参数,可以不写();即直接写成 new Person;
2 Student.prototype.constructor = Student;

用Person的实例来覆盖Student的原型对象;创建了实例,比起前面那种,显示是浪费内存了,不过这同时也解决了上面那种方法的缺点,即此时Student.prototype上的任何修改不会体现到Person.prototype中,即子类不会影响父类。

3,利用控对象来组合1和2的优点,去掉缺点

复制代码 代码如下:

var  F = function(){};
F.prototype = Person.prototype;
Student.prototype  = new F();
Student.prototype.constructor  = Student;

F是个空对象,上面只有些原型方法,实例化时内存占用较少,同时也隔离开了子类对父类的影响。

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
本文实例讲述了jQuery实现统计输入文字个数的方法。分享给大家供大家参考。具体如下: jQuery统计输入文字个数可以使用在统计回复字数,标题字数长度提示,增加友好度提高用户体验。代码如下: 复制代码 代码如下: html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / titlejQuery统计文字个数/title script t

基于jquery的cookie的用法 - 2015-07-18 04:07:01

example $.cookie('name', ‘value'); 设置cookie的值,把name变量的值设为value example $.cookie('name', ‘value', {expires: 7, path: ‘/', domain: ‘jquery.com', secure: true}); 新建一个cookie 包括有效期 路径 域名等 example $.cookie('name', ‘value'); 新建cookie example $.cookie('name', null
本文实例讲述了JavaScript实现的encode64加密算法。分享给大家供大家参考。具体如下: 这段JavaScript代码可实现encode64加密算法,速度还是相当不错的。 //encode64编解码(function() { var codeChar = "PaAwO65goUf7IK2vi9-xq8cFTEXLCDY1Hd3tV0ryzjbpN_BlnSs4mGRkQWMZJeuh"; window.encode64 = function(str) { var s = ""; var a =
本文实例讲述了ajax+jQuery实现级联显示地址的方法。分享给大家供大家参考。具体实现方法如下: %@ page language="java" import="java.util.*" pageEncoding="utf-8"contentType="text/html; charset=utf-8"%htmlhead title初始化HELLO/title script type="text/javascript" src="../../js/jquery.js"/script script ty
继承是我们在实现面向对象编程的时候很重要的一个手段。虽然我们讲不能过度继承,多利用组合代替继承,但是继承总是免不了的。这里要讨论的就是Javascript中的继承机制。 Javascript中实际上是没有继承的概念的,但是我们可以通过一些手段来模仿实现它。这种继承实际上把一个对象复制到另外一个对象内部。你需要注意的是所有的本地类和宿主类是不能作为基类被继承的,主要是为了安全方面的考虑。 Javascript中的继承大约有三类:1.对象冒充;2.原型继承;3.二者的混合。 一、对象冒充 其实对象冒充是跟th
下面对实现页面定时跳转(也称倒计时跳转)做一下总结,各种定时跳转代码记录如下: (1)使用setTimeout函数实现定时跳转(如下代码要写在body区域内) 复制代码 代码如下: script type="text/javascript" //3秒钟之后跳转到指定的页面 setTimeout(window.location.href=#>/script (2)html代码实现,在页面的head区域块内加上如下代码 复制代码 代码如下: !--5秒钟后跳转到指定的页面-- meta http-equiv="
javascript中的事件驱动是通过 鼠标或热键 的动作引发的 主要事件如下: 1、鼠标单击事件 onclick 如:( input type="button" value="鼠标单击" onclick="执行语句.处理" /) 通常用于如下控件: button 按钮对象 checkbox 复选框或检查列表 --配合onclick单击事件,通常用于全选效果 radio 单选按纽 reset 重置按钮 submit提交按钮 2、内容改变事件 onchange 如:(input type="text" onc
本文实例讲述了JavaScript获得url查询参数的方法。分享给大家供大家参考。具体实现方法如下: function getQueryVariable(variable){ var query = window.location.search.substring(1); var vars = query.split(""); for (var i=0;ivars.length;i++) { var pair = vars[i].split("="); if(pair[0] == variable){re
1、jQuery自带的$.map方式 复制代码 代码如下: $.map(json, function (n) { return n; }); 这种方式原来用于复制数组还可以,今天用它复制数组中的某一条记录,发现字段名称丢失了,后来发现了第二种方法。 2、深复制与浅复制 复制代码 代码如下: // 浅层复制(只复制顶层的非 object 元素) var newObject = jQuery.extend({}, oldObject); // 深层复制(一层一层往下复制直到最底层) var newObject
幻灯片自动播放图片是当前网站比较流行的一个展示方式。在网上我们能找到各种特效丰富的幻灯片插件和代码。这里项目需要,我自己做了一个简单的,就不详细讲解了,代码很简单。直接看效果图和代码吧。 所有代码 ppt.html,需要提供相应图片才能显示: 复制代码 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" html head meta http-eq