当前位置:文档之家› javascript继承

javascript继承

javascript继承
javascript继承

javascript继承

当代码var zhang = new Person("ZhangSan", "man")执行时,其实内部做了如下几件事情:

?创建一个空白对象(new Object())。

?拷贝Person.prototype中的属性(键值对)到这个空对象中(我们前面提到,内部实现时不是拷贝而是一个隐藏的链接)。

?将这个对象通过this关键字传递到构造函数中并执行构造函数。

?将这个对象赋值给变量zhang。

上面关于继承的实现很粗糙,并且存在很多问题:

?在创建Employee构造函数和原型(以后简称类)时,就对Person进行了实例化,这是不合适的。

?Employee的构造函数没法调用父类Person的构造函数,导致在Employee构造函数中对name和sex属性的重复赋值。

?Employee中的函数会覆盖Person中的同名函数,没有重载的机制(和上一条是一个类型的问题)。

?创建JavaScript类的语法过于零散,不如C#/Java中的语法优雅。

?实现中有constructor属性的指向错误,这个会在第二篇文章中讨论。

我们会在第三章完善这个例子。

JavaScript继承的实现

正因为JavaScript本身没有完整的类和继承的实现,并且我们也看到通过手工实现的方式存在很多问题,因此对于这个富有挑战性的任务网上已经有很多实现了:

?this

?this表示当前对象,如果在全局作用范围内使用this,则指代当前页面对象window;

如果在函数中使用this,则this指代什么是根据运行时此函数在什么对象上被调用。我们还可以使用apply和call两个全局方法来改变函数中this的具体指向。

?先看一个在全局作用范围内使用this的例子:

?

?函数中的this是在运行时决定的,而不是函数定义时,如下:

?

?全局函数apply和call可以用来改变函数中this的指向,如下:

?注:apply和call两个函数的作用相同,唯一的区别是两个函数的参数定义不同。?

?因为在JavaScript中函数也是对象,所以我们可以看到如下有趣的例子:

?

?prototype

?我们已经在第一章中使用prototype模拟类和继承的实现。prototype本质上还是一个JavaScript对象。并且每个函数都有一个默认的prototype属性。

如果这个函数被用在创建自定义对象的场景中,我们称这个函数为构造函数。比如下面一个简单的场景:

?作为类比,我们考虑下JavaScript中的数据类型- 字符串(String)、数字(Number)、数组(Array)、对象(Object)、日期(Date)等。我们有理由相信,在JavaScript 内部这些类型都是作为构造函数来实现的,比如:

?同时对数组操作的很多方法(比如concat、join、push)应该也是在prototype属性中定义的。

实际上,JavaScript所有的固有数据类型都具有只读的prototype属性(这是可以理解的:因为如果修改了这些类型的prototype属性,则哪些预定义的方法就消失了),但是我们可以向其中添加自己的扩展方法。

?

注意:这里有一个陷阱,向Array的原型中添加扩展方法后,当使用for-in循环数组时,这个扩展方法也会被循环出来。

下面的代码说明这一点(假设已经向Array的原型中扩展了min方法):

?解决方法也很简单:

?

?constructor

?constructor始终指向创建当前对象的构造函数。比如下面例子:

?

?但是当constructor遇到prototype时,有趣的事情就发生了。

我们知道每个函数都有一个默认的属性prototype,而这个prototype的constructor 默认指向这个函数。如下例所示:

?当时当我们重新定义函数的prototype时(注意:和上例的区别,这里不是修改而是覆盖),constructor的行为就有点奇怪了,如下示例:

?为什么呢?

原来是因为覆盖Person.prototype时,等价于进行如下代码操作:

?而constructor始终指向创建自身的构造函数,所以此时

Person.prototype.constructor === Object,即是:

?怎么修正这种问题呢?方法也很简单,重新覆盖Person.prototype.constructor即可:

?

?在第一章中,我们使用构造函数和原型的方式在JavaScript的世界中实现了类和继承,但是存在很多问题。这一章我们将会逐一分析这些问题,并给出解决方案。

?注:本章中的jClass的实现参考了Simple JavaScript Inheritance的做法。

?首先让我们来回顾一下第一章中介绍的例子:

?修正constructor的指向错误

?

?从上一篇文章中关于constructor的描述,我们知道Employee实例的constructor 会有一个指向错误,如下所示:

?我们需要简单的修正:

?创建Employee类时实例化Person是不合适的

?

?但另一方面,我们又必须依赖于这种机制来实现继承。解决办法是不在构造函数中初始化数据,而是提供一个原型方法(比如init)来初始化数据。

?这种方式下,必须在实例化一个对象后手工调用init函数,如下:

?

?如何自动调用init函数?

?

?必须达到两个效果,构造类时不要调用init函数和实例化对象时自动调用init函数。看来我们需要在调用空的构造函数时有一个状态标示。

?但是这样就必须引入全局变量,这是一个不好的信号。

?

?如何避免引入全局变量initializing?

?

?我们需要引入一个全局的函数来简化类的创建过程,同时封装内部细节避免引入全局变量。

?使用jClass函数来创建类和继承类的方法:

?OK,现在创建类和实例化类的方式看起来优雅多了。但是这里面还存在明显的瑕疵,Employee的初始化函数init无法调用父类的同名方法。

?

?如何调用父类的同名方法?

?

?我们可以通过为实例化对象提供一个base的属性,来指向父类(构造函数)的原型,如下:

javascript 内置函数和对象

实验项目三内置函数和对象 【学时数】 2 (45 分钟× 2=90 分钟) 【实验内容】 1 、JavaScript 内置函数的应用 2 、JavaScript 内置对象的应用 【实验参考】 《网页设计与制作》………………………………………………………… 重庆大学出版社 《网页标题制作技巧与实例》……………………………………………… 清华大学出版社 《javascript 入门与提高》……………………………………………… 清华大学出版社 《javascript 宝典》……………………………………………………… 电子工业出版社 【实验设备】 计算机,投影机 【实验目的与要求】 1 、掌握JavaScript 内置函数的使用方法 2 、掌握JavaScript 常用内置对象的属性和方法 【实验重点】 1 、掌握JavaScript 内置函数的使用方法 2 、掌握JavaScript 常用内置对象的属性和方法 【实验难点】 1 、掌握使用浏览器对象提供的信息来完成一定功能的网页设计。 【实验方式】 1 、项目工程互动式教学法 2 、“讲、学、练”相结合:对于javascript 内置函数和对象相关细节,大量采用演示、讲解和操作等方式。使学生在实验中加深对相关内容的理解并熟练掌握。 【实验设计】 向学生演示多个javascrip 内置函数和对象的程序案例,学生跟着教师一起完成javascript 程序的编写,同时完成教师布置的思考题,教师实施指导。 第一步:演示JavaScript 内置函数的应用,学生按照教师的操作步骤,自己动手编写该程序,并完成教师布置的思考题。(20 分钟左右)第二步:演示JavaScript 常用内置对象的应用,学生按照教师的操作步骤,自己动手编写该程序,并完成教师布置的思考题。(35 分钟左右) 【实验过程】 实验内容一:JavaScript 内置函数的应用

理解JavaScript中函数的使用

理解JavaScript中函数的使用 函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解。 JavaScript中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的。通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递。在继续讲述之前,先看一下函数的使用语法: function func1(…){…} var func2=function(…){…}; var func3=function func4(…){…}; var func5=new Function(); 这些都是声明函数的正确语法。它们和其他语言中常见的函数或之前介绍的函数定义方式有着很大的区别。那么在JavaScript中为什么能这么写?它所遵循的语法是什么呢?下面将介绍这些内容。 认识函数对象(Function Object) 可以用function关键字定义一个函数,并为每个函数指定一个函数名,通过函数名来进行调用。在JavaScript解释执行时,函数都是被维护为一个对象,这就是要介绍的函数对象(Function Object)。 函数对象与其他用户所定义的对象有着本质的区别,这一类对象被称之为内部对象,例如日期对象(Date)、数组对象(Array)、字符串对象(String)都属于内部对象。这些内置对象的构造器是由JavaScript本身所定义的:通过执行new Array()这样的语句返回一个对象,JavaScript内部有一套机制来初始化返回的对象,而不是由用户来指定对象的构造方式。 在JavaScript中,函数对象对应的类型是Function,正如数组对象对应的类型是Array,日期对象对应的类型是Date一样,可以通过new Function()来创建一个函数对象,也可以通过function关键字来创建一个对象。为了便于理解,我们比较函数对象的创建和数组对象的创建。先看数组对象:下面两行代码都是创建一个数组对象myArray: var myArray=[]; //等价于 var myArray=new Array();

Javascript自执行匿名函数(function { }) 的原理浅析

Javascript自执行匿名函数(function { }) 的原理浅析 匿名函数就是没有函数名的函数。这篇文章主要介绍了Javascript自执行匿名函数(function { }) 的原理浅析的相关资料,需要的朋友可以参考下 函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途。匿名函数指没有指定函数名或指针的函数,自执行匿名函数只是其中一种,下文中称这种函数为:自执行函数 下面是一个最常见的自执行函数: // 传统匿名函数 (function { alert('hello'); }) ; 这段代码的执行效果就是在页面再载入时弹出:"hello" 是什么促使它自动执行的?,来看下面的代码 // 在传统写法上去掉小括号,并在前面加上运算符~,!,+,- ~function { alert('hello'); } ;

!function { alert('hello'); } ; +function { alert('hello'); } ; -function { alert('hello'); } ; 这些写法与上文所说的传统方式执行起来并无区别, 我发现,这些写法的共同点是运算符,其实传统方式的小括号也属于运算的一种,出现在:a=b*(c+d),运算符 + 传递给自生的参数 = 函数自动执行?但有些符号也不支持,比如“=,*,/”号,它自执行的原因还是很神秘,网上也找不到像样的答案 然后我发现了一个神奇的现象,这些运算符可以无限叠加。。。。。。 // function前面是特定符号可以无限叠加... ~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~!+-~!+ -+-!~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~!+ -~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-!~!+-~!+-+-

实验项目21—JAVASCRIPT内置函数和对象

实验难点 实验内容实验目的 实验重点实验步骤 实验内容 1、JavaScript 内置函数的应用 2、JavaScript 内置对象的应用 3、JavaScript 浏览器对象的应用

实验难点实验内容实验目的实验重点实验步骤 实验目的 1、掌握JavaScript 内置函数的使用方法 2、掌握JavaScript 常用内置对象的属性和方法 3、掌握JavaScript 浏览器对象的含义 4、掌握使用浏览器对象提供的信息来完成一定功能的网页设计。

实验难点 实验内容实验目的实验重点实验步骤 实验重点 1、掌握JavaScript 内置函数的使用方法 2、掌握JavaScript 常用内置对象的属性和方法 3、掌握JavaScript 浏览器对象的含义

实验难点 实验内容实验目的实验重点 实验步骤 实验难点 1、掌握使用浏览器对象提供的信息来完成一定功能的网页设计。

实验难点 实验内容 实验目的 实验重点 实验步骤实验内容一:JavaScript 内置函数的应用 1、eval( ):计算字符串表达式的值 2、parseFloat( )和parseInt( ):将字符串开头的整数或浮点数分解出来,转换为整数或浮点数 3、isNaN( ):确定一个变量是否为NaN (Not a Number ) 4、escape( ):将字符串中的非字母数字字符转换为按格式%XX 表示的数字 5、unescape( ):将字符串格式为%XX 的数字转换为字符 6、程序案例1_1:求用户在提示对话框中输入的表达式的值。 7、思考题: 判断用户输入的字符是不是数字,如果是,分别将其转换成浮点数和整数,并显示到网页上。

javascript函数库(全)

转载请注明出处-中国设计秀https://www.doczj.com/doc/4f3554621.html, /* -------------- 函数检索-------------- trim函数: trim() lTrim() rTrim() 校验字符串是否为空: checkIsNotEmpty(str) 校验字符串是否为整型: checkIsInteger(str) 校验整型最小值: checkIntegerMinValue(str,val) 校验整型最大值: checkIntegerMaxValue(str,val) 校验整型是否为非负数: isNotNegativeInteger(str) 校验字符串是否为浮点型: checkIsDouble(str) 校验浮点型最小值: checkDoubleMinValue(str,val) 校验浮点型最大值: checkDoubleMaxValue(str,val) 校验浮点型是否为非负数: isNotNegativeDouble(str) 校验字符串是否为日期型: checkIsValidDate(str) 校验两个日期的先后: checkDateEarlier(strStart,strEnd) 校验字符串是否为email型: checkEmail(str) 校验字符串是否为中文: checkIsChinese(str) 计算字符串的长度,一个汉字两个字符: realLength() 校验字符串是否符合自定义正则表达式: checkMask(str,pat) 得到文件的后缀名: getFilePostfix(oFile) -------------- 函数检索-------------- */ /** * added by LxcJie 2004.6.25 * 去除多余空格函数 * trim:去除两边空格lTrim:去除左空格rTrim: 去除右空格 * 用法: * var str = " hello "; * str = str.trim(); */ String.prototype.trim = function() { $)/g,return this.replace(/(^[\s]*)|([\s]* ""); } String.prototype.lTrim = function() { return this.replace(/(^[\s]*)/g, ""); } String.prototype.rTrim = function() { $)/g,return this.replace(/([\s]* ""); } /********************************** Empty **************************************/ /** *校验字符串是否为空 *返回值: *如果不为空,定义校验通过,返回true *如果为空,校验不通过,返回false 参考提示信息:输入域不能为空! */

javascript常用函数集

javascript常用函数集 javascript提供了许多函数供开发人员使用,下面给出一个简单介绍,更详细的信息请参考Visual InterDev提供的在线关心。 javascript函数一共可分为五类: ·常规函数 ·数组函数 ·日期函数 ·数学函数 ·字符串函数 1.常规函数 javascript常规函数包括以下9个函数: (1)alert函数:显示一个警告对话框,包括一个OK按钮。 (2)confirm函数:显示一个确认对话框,包括OK、Cancel按钮。 (3)escape函数:将字符转换成Unicode码。 (4)eval函数:运算表达式的结果。 (5)isNaN函数:测试是(true)否(false)不是一个数字。 (6)parseFloat函数:将字符串转换成符点数字形式。 (7)parseInt函数:将符串转换成整数数字形式(可指定几进制)。 (8)prompt函数:显示一个输入对话框,提示等待用户输入。例如: eval( )内置函数的用法:计算字符串表达式的值。

JAVASCRIPT面向对象基础总结

javascript面向对象基础 1.使用[]调用对象的属性和方法 functionUser() { this.age=21; this.sex="男?"; } varuser=newUser(); alert(user["age"]); 2.动态添加,修改,删除对象的属性和方法//定义类varuser=newObject(); //添加属性和方法 https://www.doczj.com/doc/4f3554621.html,="cary"; user.age=21; user.show=function(){ alert(https://www.doczj.com/doc/4f3554621.html,+"年?龄?为?:?"+this.age);} //执行方法 user.show(); //修改属性和方法 https://www.doczj.com/doc/4f3554621.html,="James"; user.show=function() { alert(https://www.doczj.com/doc/4f3554621.html,+"你?好?"); } //执行方法 user.show(); //删除属性和方法 https://www.doczj.com/doc/4f3554621.html,="undefined"; user.show="undefined" //执行方法 user.show(); 3.使用大括号{}语法创建无类型对象varobj={}; varuser= { name:"cary", age:21,

show:function(){ alert(https://www.doczj.com/doc/4f3554621.html,+"年?龄?为?:?"+this.age); } } user.show(); varobj={};等价于 varobj=newObject(); 4.Prototype原型对象 每个函数function也是一个对象,对应的类类型为“Function”,每个函数对象都有一个子对象prototype,表示函数的原型,所以当我们new一个类的对象的时候prototype对象的成员都会被实例化为对象的成员。例如: functionclass1() {} class1.prototype.show=function(){ alert("prototyemember"); } varobj=newclass1(); obj.show(); 5.Function函数对象详解 5.1Function和Date,Array,String等一样都属于JavaScript的内部对象,这些对象的构造器是由JavaScript本身所定义的。上面说过函数对象对应的类型是Function,这个和数组的对象是Array一个道理。所以也可以像newArray()一样newFunction()来创建一个函数对象,而函数对象除了使用这种方式还可以使用function关键字来创建。我们之所以不经常使用newFunction()的方式来创建函数是因为一个函数一般会有很多语句,如果我们将这些都传到newFunction()的参数中会显得可读性比较差。varfunctionName=newFunction(p1,p2,...,pn,body)其中p1到pn为参数,body为函数体。 5.2有名函数和无名函数 有名函数:functionfuncName(){}无名函数:varfuncName=function(){}他们之间的唯一区别:就是对于有名函数他可以出现在调用之后再定义,而对于无名函数,他必须是在调用之前就已经定义好。 5.3我们可以利用Function的prototype对象来扩展函数对象,如: Function.prototype.show=function(){ alert("扩展方法"); }

JavaScript函数大全 集合

1.document.write("");为输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document) 5.得到表单中元素的名称和值:document.getElementById("表单中元素的ID号").name(或value) 6.一个小写转大写的JS: document.getElementById("output").value = document.getElementById("input").value.toUpperCase(); 7.JS中的值类型:String,Number,Boolean,Null,Object,Function 8.JS中的字符型转换成数值型:parseInt(),parseFloat() 9.JS中的数字转换成字符型:(""+变量) 10.JS中的取字符串长度是:(length) 11.JS中的字符与字符相连接使用+号. 12.JS中的比较操作符有:==等于,!=不等于,>,>=,<.<= 13.JS中声明变量使用:var来进行声明 14.JS中的判断语句结构:if(condition){}else{} 15.JS中的循环结构:for([initial expression];[condition];[upadte expression]) {inside loop} 16.循环中止的命令是:break 17.JS中的函数定义:function functionName([parameter],...){statement[s]} 18.当文件中出现多个form表单时.可以用document.forms[0],document.forms[1]来代替. 19.窗口:打开窗口window.open(), 关闭一个窗口:window.close(), 窗口本身:self 20.状态栏的设置:window.status="字符"; 21.弹出提示信息:window.alert("字符"); 22.弹出确认框:window.confirm(); 23.弹出输入提示框:window.prompt(); 24.指定当前显示链接的位置:window.location.href="URL" 25.取出窗体中的所有表单的数量:document.forms.length 26.关闭文档的输出流:document.close(); 27.字符串追加连接符:+= 28.创建一个文档元素:document.createElement(),document.createTextNode() 29.得到元素的方法:document.getElementById() 30.设置表单中所有文本型的成员的值为空: var form = window.document.forms[0] for (var i = 0; i

JavaScript对象数组排序函数及六个用法_javascript技巧.docx

JavaScript对象数组排序函数及六个用法 分享一个用于数组或者对象的排序的函数。该函数可以以任意深度的数组或者对 彖的值作为排序基数对数组或的元素进行排序。 代码如下: /** *排序数组或者对象 *by Jinko *date -- *?param object数组或对彖 *@param subkey需要排序的子键,该参数可以是字符串,也可以是一个数组*@param desc 排序方式,true:降序,false] undefined:升序 *?returns {*}返回排序后的数组或者对象 * *注意:对于对彖的排序,如果使用console, log打印对彖的显示可能和排序结果不一致, *其键会被浏览器以字母顺序排序显示,但在for循环中则为正确的排序顺序*/ function sort object (object, subkey, desc) { " var i s_array 二false; if (Object, prototype. toString. call(objeet)二二二[object Array]J) { is_array = true; }" if(is_array) { var keys = {length:object, length}; } else { if(typeof(Object, keys) == ' function") { var keys = Object, keys(object); } else{ var keys 二[]; for (var key in keys) { keys.push (key); } } } for(var i二;i

Javascript-5-函数-下

1:作用域 定义:变量起作用的范围。 在函数外部定义的变量称为全局变量,那么所有的脚本和函数都能访问到它。 在函数内部定义的变量称为局部变量(本地变量),所以只能在函数内部才能访问的到。 注: 1:如果把值赋给尚未声明的变量,该变量将自动作为全局变量声明。 2:变量作用域在函数定义的时候就已经确定下来了。 2:生存周期 JavaScript 变量的生命期从它们被声明的时间开始。 局部变量会在函数运行完毕后被删除。 全局变量会在页面关闭后被删除。 3:with语句(扩展) 定义:为一个或者一组语句指定默认对象。 注意:在严格模式下,with语句不能使用。 提示:with语句是运行缓慢的代码块,尽量避免使用。 4:回调函数 回调函数就是一个通过函数指针调用的函数。

如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数。 回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,用于对该事件或条件进行响应。 5:递归函数 定义:允许内部程序调用自己本身的函数。 特点: 1:在函数里面调用自身。 2:必须有一个明确的递归结束条件,这个称之为递归出口。 3:不确定循环执行的次数。 注:快速排序中就使用到了递归函数。 6:匿名函数及调用方式 定义:顾名思义,就是没有名字的函数。 自运行:自动运行。 调用方式:(function () {})(); 7:构造函数 主要用来在创建对象时初始化对象,即为对象成员变量赋初始值,总与new运算符一起使用。构造函数名称首字母一般都大写。

应用: 1:利用递归求100的阶乘。 function recursive(num) { return num === 1 ? 1: num * recursive(num - 1); } 2:利用递归求两个数字的最大公约数。 公约数:亦称“公因数”。它是一个能被若干个整数同时均整除的整数。如果一个整数同时是几个整数的约数,称这个整数为它们的“公约数”;公约数中最大的称为最大公约数。 function getNum(m, n) { var r = m % n; m = n; n = r; return r === 0 ? m : getNum(m, n); }

JavaScript

JavaScript+jQuery实现页面特效 1.下列选项中,不是typeof的返回值的是()。 A.String B.Boolean C.Null D.Undefined 2.分析下列JavaScript代码,经历运算后a的值为()。 Var x=”13”; Var y=”23”; Var a=x+y; A.1323 B.13 C.23 D.程序报错 3.下列语句中,()语句是根据表达式的值进行匹配,然后执行其中的一个语句块。如果找不到匹配项,则执行默认语句块。 A.switch B.if-else C.for D.continue 4.在JavaScript中,运行下列代码后,sum的值是()。 Var sum=0;

For(i=1;i<10;i++){ If(i%5==0) Break; Sum=sum+i; } A.40 B.50 C.5 D.10 5.在JavaScript中,运行下面代码后,在页面上输出()。Var flag; document.write(typeof(flag)); A.Undefined B.Null C.Number D.Boolean 6.下列关于函数说法错误的是()。 A.函数是一段可以重复代码的集合

B.JavaScript中使用function关键字定义函数 C.函数只能在事件中调用 D.函数通常情况下用于处理事件的发生 7.下拉菜单中,用户更改表单元素select中的值时,就会调用()事件处理程序。 A.onChange B.onFocus C.onMouseOver D.onClick 8.当按键盘A时,使用onKeypress事件打印event.KeyCode的结果是()。 A.65 B.13 C.97 D.37 9.关于JavaScript中的函数,下列说法正确的是()。 A.即使声明了形参调用时也可以不传参数

JavaScript的系统函数学习

JavaScript的系统函数学习 1.编码处理函数 1) encodeURI 返回一个对URI字符串编码后的结果。URL是最常见的一种URI; 2) decodeURI 将一个已编码的URI字符串解码成最原始的字符串返回; 3)举例: < Script language = " javascript " > 输出结果如下: encodeStr: https://www.doczj.com/doc/4f3554621.html,/index.jsp?name=%E9%98%BF%E8%9C%9C%E6%9E%9C decodeStr: https://www.doczj.com/doc/4f3554621.html,/index.jsp?name=阿蜜果 2. 数值处理函数 1) parseInt 将一个字符串指定的进制转换为一个整数,语法格式为: parseInt(numString, [radix]) 第一个参数是要进行转换的字符串,是介于2到36之间的数值,用于指定进行字符串转换时

所用的进制。 举例如下: