js的一点
1.js中实现继承的方法
1.js原型(prototype)实现继承
<SPAN style="<SPAN style="FONT-SIZE: 18px"><html>
<body>
<script type="text/javascript">
function Person(name,age){
this.name=name;
this.age=age;
}
Person.prototype.sayHello=function(){
alert("使用原型得到Name:"+this.name);
}
var per=new Person("马小倩",21);
per.sayHello(); //输出:使用原型得到Name:马小倩
function Student(){}
Student.prototype=new Person("洪如彤",21);
var stu=new Student();
Student.prototype.grade=5;
Student.prototype.intr=function(){
alert(this.grade);
}
stu.sayHello();//输出:使用原型得到Name:洪如彤
stu.intr();//输出:5
</script>
</body>
</html></SPAN></SPAN>
2.构造函数实现继承
<body>
<script type="text/javascript">
function Parent(name){
this.name=name;
this.sayParent=function(){
alert("Parent:"+this.name);
}
}
function Child(name,age){
this.tempMethod=Parent;
this.tempMethod(name);
this.age=age;
this.sayChild=function(){
alert("Child:"+this.name+"age:"+this.age);
}
}
var parent=new Parent("江剑臣");
parent.sayParent(); //输出:“Parent:江剑臣”
var child=new Child("李鸣",24); //输出:“Child:李鸣 age:24”
child.sayChild();
</script>
</body>
</html></SPAN>
3.call , apply实现继承
<SPAN style="FONT-SIZE: 18px"><html>
<body>
<script type="text/javascript">
function Person(name,age,love){
this.name=name;
this.age=age;
this.love=love;
this.say=function say(){
alert("姓名:"+name);
}
}
//call方式
function student(name,age){
Person.call(this,name,age);
}
//apply方式
function teacher(name,love){
Person.apply(this,[name,love]);
//Person.apply(this,arguments); //跟上句一样的效果,arguments
}
//call与aplly的异同:
//1,第一个参数this都一样,指当前对象
//2,第二个参数不一样:call的是一个个的参数列表;apply的是一个数组(arguments也可以)
var per=new Person("武凤楼",25,"魏荧屏"); //输出:“武凤楼”
per.say();
var stu=new student("曹玉",18);//输出:“曹玉”
stu.say();
var tea=new teacher("秦杰",16);//输出:“秦杰”
tea.say();
</script>
</body>
</html></SPAN>
二、call和apply的用法(详细介绍)
js中call和apply都可以实现继承,唯一的一点参数不同,func.call(func1,var1,var2,var3)对应的apply写法为:func.apply(func1,[var1,var2,var3])。
<SPAN style="FONT-SIZE: 18px">call 方法
调用一个对象的一个方法,以另一个对象替换当前对象。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数
thisObj
可选项。将被用作当前对象的对象。
arg1, arg2, , argN
可选项。将被传递方法参数序列。
说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。</SPAN>
说简单一点,这两函数的作用其实就是更改对象的内部指针,即改变对象的this指向的内容。这在面向对象的js编程过程中有时是很有用的。下面以apply为例,说说这两个函数在 js中的重要作用。如:
<SPAN style="FONT-SIZE: 18px"> function Person(name,age){ //定义一个类
this.name=name; //名字
this.age=age; //年龄
this.sayhello=function(){alert(this.name)};
}
function Print(){ //显示类的属性
this.funcName="Print";
this.show=function(){
var msg=[];
for(var key in this){
if(typeof(this[key])!="function"){
msg.push([key,":",this[key]].join(""));
}
}
alert(msg.join(" "));
};
}
function Student(name,age,grade,school){ //学生类
Person.apply(this,arguments);//比call优越的地方
Print.apply(this,arguments);
this.grade=grade; //年级
this.school=school; //学校
}
var p1=new Person("卜开化",80);
p1.sayhello();
var s1=new Student("白云飞",40,9,"岳麓书院");
s1.show();
s1.sayhello();
alert(s1.funcName);</SPAN>
我们先从Math.max()函数说起,Math.max后面可以接任意个参数,最后返回所有参数中的最大值。
alert(Math.max(5,7,9,3,1,6)); //9
//但是在很多情况下,我们需要找出数组中最大的元素。
var arr=[5,7,9,1];
//alert(Math.max(arr)); // 这样却是不行的。NaN
//要这样写
function getMax(arr){
var arrLen=arr.length;
for(var i=0,ret=arr[0];i<arrLen;i++){
ret=Math.max(ret,arr[i]);
}
return ret;
}
alert(getMax(arr)); //9
//换用apply,可以这样写
function getMax2(arr){
return Math.max.apply(null,arr);
}
alert(getMax2(arr)); //9
//两段代码达到了同样的目的,但是getMax2却优雅,高效,简洁得多。
//再比如数组的push方法。
var arr1=[1,3,4];
var arr2=[3,4,5];
//如果我们要把 arr2展开,然后一个一个追加到arr1中去,最后让arr1=[1,3,4,3,4,5]
//arr1.push(arr2)显然是不行的。 因为这样做会得到[1,3,4,[3,4,5]]
//我们只能用一个循环去一个一个的push(当然也可以用arr1.concat(arr2),但是concat方法并不改变arr1本身)
var arrLen=arr2.length;
for(var i=0;i<arrLen;i++){
arr1.push(arr2[i]);
}
//自从有了Apply,事情就变得如此简单
Array.prototype.push.apply(arr1,arr2); //现在arr1就是想要的结果SPAN>
定义和用法:
after() 方法在被选元素后插入指定的内容。参考:http://keleyi.com/a/bjac/cfyxd60g.htm
语法:
$(selector).after(content)
实例效果体验:http://keleyi.com/keleyi/phtml/jquery/13.htm
<html>
<head>
<title>jquery的after函数实例-柯乐义</title><base target="_blank" />
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<style>
.yuanlai_keleyi_com{border:1px solid black;padding:5px}
.a_keleyi_com{color:Blue;} a{color:Blue}
</style>
</head>
<body>
<br />
<span class="yuanlai_keleyi_com">柯乐义,这是span里的内容,keleyi.com。<a href="http://keleyi.com/a/bjac/2oncd079.htm">原文</a></span>
<br />
<br /><button id="after_keleyi_com">after函数</button>
<br /><br />
<a href="http://keleyi.com/keleyi/phtml/jquery/13a.htm">append函数</a> <a href="http://keleyi.com/keleyi/phtml/jquery/13b.htm">appendTo函数</a>
<script type="text/javascript">
$("#after_ke"+"leyi_com").click(function () {
$("span").after('<a href="http://keley'+'i.com" class="a_kel'+'eyi_com">这是after函数加上去的内容</a>')
})
</script>
</body>
</html>
结果如下:
<span class="yuanlai_keleyi_com">柯乐义,这是span里的内容,keleyi.com。<a href="http://keleyi.com/a/bjac/2oncd079.htm">原文a>span><ahref="http://keleyi.com" class="a_keleyi_com">这是after函数加上去的内容a>
即:span标签后面多了一个a标签
2、append函数
定义和用法:
append() 方法在被选元素的结尾(仍然在内部)插入指定内容。参考:http://keleyi.com/a/bjac/0vpch15n.htm
语法:
$(selector).append(content)
实例效果体验:http://keleyi.com/keleyi/phtml/jquery/13a.htm
<html>
<head>
<title>jquery的append函数实例-柯乐义</title><base target="_blank" />
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<style>
.yuanlai_keleyi_com{border:1px solid black;padding:5px}
.a_keleyi_com{color:Blue;} a{color:Blue}
</style>
</head>
<body>
<br />
<span class="yuanlai_keleyi_com">柯乐义,这是span里的内容,keleyi.com。<a href="http://keleyi.com/a/bjac/2oncd079.htm">原文</a>。</span>
<br />
<br /><button id="after_keleyi_com">append函数</button>
<br /><br />
<a href="http://keleyi.com/keleyi/phtml/jquery/13.htm">after函数</a> <a href="http://keleyi.com/keleyi/phtml/jquery/13b.htm">appendTo函数</a>
<script type="text/javascript">
$("#after_ke" + "leyi_com").click(function () {
$(".yuanlai_ke"+"leyi_com").append('<a href="http://keley' + 'i.com" class="a_kel' + 'eyi_com">这是append函数加上去的内容</a>')
})
</script>
</body>
</html>
结果如下:
<span class="yuanlai_keleyi_com">柯乐义,这是span里的内容,keleyi.com。<a href="http://keleyi.com/a/bjac/2oncd079.htm">原文</a><a href="http://keleyi.com" class="a_keleyi_com">这是after函数加上去的内容</a></span>
即:span标签里面多了一个a标签
3、appendTo函数
定义和用法:
appendTo() 方法在被选元素的结尾(仍然在内部)插入指定内容。参考:http://keleyi.com/a/bjac/opnw2awa.htm
语法:
$(content).appendTo(selector)
实例效果体验:http://keleyi.com/keleyi/phtml/jquery/13b.htm
<html>
<head>
<title>jquery的appendTo函数实例-柯乐义</title><base target="_blank" />
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<style>
.yuanlai_keleyi_com{border:1px solid black;padding:5px}
a{color:Blue}
.a_keleyi_com{color:Blue;}
</style>
</head>
<body>
<br />
<span class="yuanlai_keleyi_com">柯乐义,这是span里的内容,keleyi.com。<a href="http://keleyi.com/a/bjac/2oncd079.htm">原文</a>。</span>
<br />
<br /><button id="after_keleyi_com">appendTo函数</button>
<br /><br />
<a href="http://keleyi.com/keleyi/phtml/jquery/13a.htm">append函数</a> <a href="http://keleyi.com/keleyi/phtml/jquery/13.htm">after函数</a>
<script type="text/javascript">
$("#after_ke" + "leyi_com").click(function () {
$('<a href="http://keley' + 'i.com" class="a_kel' + 'eyi_com">这是appendTo函数加上去的内容</a>').appendTo(".yuanlai_k" + "eleyi_com")
//这样的写法是不正确的: $(".yuanlai_k" + "eleyi_com").appendTo('<a href="http://keley' + 'i.com" class="a_kel' + 'eyi_com">这是appendTo函数加上去的内容</a>')
})
</script>
</body>
</html>
结果如下:
<span class="yuanlai_keleyi_com">柯乐义,这是span里的内容,keleyi.com。<a href="http://keleyi.com/a/bjac/2oncd079.htm">原文</a><a href="http://keleyi.com" class="a_keleyi_com">这是after函数加上去的内容</a></span>
即:span标签里面多了一个a标签
效果和append函数是一样,只不过它们的写法是反着来写的而已
appendTo函数的一个实际应用:http://keleyi.com/a/bjac/jp71q5jt.htm
js的一点的更多相关文章
- angular.js的一点理解
对angular.js的一点理解 2015-01-14 13:18 by MrGeorgeZhao, 317 阅读, 4 评论, 收藏, 编辑 最近一直在学习angular.js.不得不说和jquer ...
- 对angular.js的一点理解
最近一直在学习angular.js.不得不说和jquery相比有很大不同,有很多的不同点,之前也用过Knockout.js 但是两者还是有一定的区别的,首先knockout.js是基于Mvvm的,是几 ...
- js 的一点用法
js 中的json对象,ajax返回数据dataType为json否则无法将数据转换成json对象 也就无法通过json字符串转换成对象object,那么他将始终是个字符串,也就无法进行 对象操作. ...
- 关于JS的一点summary
AJAX Application AJAX--->XML.HTML.JavaScript.JSON.Text.JSONP等数据. 同时代码即业务. code--->Business log ...
- 关于Node.js, Jade一点小小的介绍。
本文出自:http://blog.csdn.net/svitter node.js大家知道的可能比較多,可是jade大家可能就不知道了.. GFW封杀掉google以后.今天在百度上找了好久也没有找到 ...
- 有关js的变量、作用域和内存问题
来自<javascript高级程序设计 第三版:作者Nicholas C. Zakas>的学习笔记(四) js共有5种基本数据类型:Undefined.NULL.Boolean.Numbe ...
- 一个Java程序猿眼中的前后端分离以及Vue.js入门
松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的,把 Vue.js 官网的资料从头到尾浏览一遍该懂的基本就懂了,个人感觉这个是最好的 Vue.js 学习资料 ...
- 《Node入门》读书笔记——用Node.js开发一个小应用
Android APP的开发告一段落,一个稳定的.实现了基本功能的APP已经交付用户使用了!我和老板交流了下,接下来准备转战Node.js了,而且一部分前端的功能也要做进去!哈哈哈~~~接下来要朝一个 ...
- JS是如何计算 1+1=2 的?
身为程序员多年,作者今天突然对这件事感到十分好奇了.我问计算机芸芸部件,1+1究竟是如何计算的,他们都茫然的看着我. 打开谷歌浏览器->Console面板,大脑向双手不停发送生物电信号,肌肉细胞 ...
随机推荐
- php 导出对象生成代码并执行var_export和eval
var_export($obj,true) 导出一个合法的php代码,返回一个字符串 eval($str) 执行一个字符串代码 __set_state 当用var_export导出一个类时,自动调用, ...
- 使用Mulesoft建立webservice, jax-ws方式, wsdl first
先创建wsdl,然后生成class 1. 下载 HRData.xsd 和 HRDataService.wsdl http://yunpan.cn/Q4zBXC4fvC74xhttp://yunpan. ...
- 例子:Database - Linq to sql
DataContext类型(数据上下文)是System.Data.Linq命名空间下的重要类型,用于把查询句法翻译成SQL语句,以及把数据从数据库返回给调用方和把实体的修改写入数据库. DataCon ...
- 函数的caller属性
今天我在这里通过一个例子介绍一下函数自身的call属性. 例: function whoCallMe(){ alert("My caller is" + whoCallMe.cal ...
- window上利用pip安装pandas
官网推荐的是直接使用Anoconda,它集成了pandas,可以直接使用.安装挺简单的,有windows下的安装包.如果不想安装庞大的Anoconda,那就一步一步用pip来安装pandas.下面我主 ...
- Schedule 学习
现在做的项目都有用到Schedule,现在用一点时间来总结. 一.首先要到Nuget中下载Quartz.net. 二.下载下来了,你需要对它进行配置,使它能给你正常的使用. 三.在Global.asa ...
- LeetCode Reorder List
struct ListNode { int val; ListNode *next; ListNode(int x) : val(x), next(NULL) {} }; class Solution ...
- python进阶笔记 thread 和 threading模块学习
Python通过两个标准库thread和threading提供对线程的支持.thread提供了低级别的.原始的线程以及一个简单的锁.threading基于Java的线程模型设计.锁(Lock)和条件变 ...
- BackgroundWorker组件的作用
当构建一个图形化的Windows Form桌面应用程序并且需要执行在应用程序主UI线程之外的线程中长时间的任务时,BackgroundWorker类就很有用了. 要使用BackgroundWorker ...
- 搭建java开发环境、使用eclipse编写第一个java程序
搭建java开发环境.使用eclipse编写第一个java程序 一.Java 开发环境的搭建 1.首先安装java SDK(简称JDK). 点击可执行文件 jdk-6u24-windows-i586. ...