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.构造函数实现继承

 
<SPAN style="FONT-SIZE: 18px"><html>  
<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>  
另外，Function.apply()在提升程序性能方面有着突出的作用：
我们先从Math.max()函数说起，Math.max后面可以接任意个参数，最后返回所有参数中的最大值。
<SPAN style="FONT-SIZE: 18px">alert(Math.max(5,8));   //8   
    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>  
2.jquery中append appendto after
1、after函数
定义和用法：
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

原文：http://keleyi.com/a/bjac/2oncd079.htm

js的一点的更多相关文章

  1. angular.js的一点理解

    对angular.js的一点理解 2015-01-14 13:18 by MrGeorgeZhao, 317 阅读, 4 评论, 收藏, 编辑 最近一直在学习angular.js.不得不说和jquer ...

  2. 对angular.js的一点理解

    最近一直在学习angular.js.不得不说和jquery相比有很大不同,有很多的不同点,之前也用过Knockout.js 但是两者还是有一定的区别的,首先knockout.js是基于Mvvm的,是几 ...

  3. js 的一点用法

     js 中的json对象,ajax返回数据dataType为json否则无法将数据转换成json对象 也就无法通过json字符串转换成对象object,那么他将始终是个字符串,也就无法进行 对象操作. ...

  4. 关于JS的一点summary

    AJAX Application AJAX--->XML.HTML.JavaScript.JSON.Text.JSONP等数据. 同时代码即业务. code--->Business log ...

  5. 关于Node.js, Jade一点小小的介绍。

    本文出自:http://blog.csdn.net/svitter node.js大家知道的可能比較多,可是jade大家可能就不知道了.. GFW封杀掉google以后.今天在百度上找了好久也没有找到 ...

  6. 有关js的变量、作用域和内存问题

    来自<javascript高级程序设计 第三版:作者Nicholas C. Zakas>的学习笔记(四) js共有5种基本数据类型:Undefined.NULL.Boolean.Numbe ...

  7. 一个Java程序猿眼中的前后端分离以及Vue.js入门

    松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的,把 Vue.js 官网的资料从头到尾浏览一遍该懂的基本就懂了,个人感觉这个是最好的 Vue.js 学习资料 ...

  8. 《Node入门》读书笔记——用Node.js开发一个小应用

    Android APP的开发告一段落,一个稳定的.实现了基本功能的APP已经交付用户使用了!我和老板交流了下,接下来准备转战Node.js了,而且一部分前端的功能也要做进去!哈哈哈~~~接下来要朝一个 ...

  9. JS是如何计算 1+1=2 的？

    身为程序员多年,作者今天突然对这件事感到十分好奇了.我问计算机芸芸部件,1+1究竟是如何计算的,他们都茫然的看着我. 打开谷歌浏览器->Console面板,大脑向双手不停发送生物电信号,肌肉细胞 ...

随机推荐

  1. hihoCoder#1000

    刚开始学习C语言,准备在做hiho的题目的过程中来学习,在此进行记录,如果代码中有错误或者不当的地方还请指正.   时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 求两个整 ...

  2. STM32——DMA接收和发送的实现

    最近写程序,需要一段一段数据的接收,再通过其他串口发送出去. 老司机们建议用DMA通信,以节约CPU资源.然后,我听了,发现挺好用的.特此,把自己写的代码贴上了. DMA发送接收的步骤如下: 1.初始 ...

  3. JAVAFX纯手写布局

    主页面效果: 第一栏的效果: 工程目录: package MessageBean; /** * * @author novo */ public class Message { private Str ...

  4. JAVA第四周作业

    import java.io.FileInputStream;import java.io.FileNotFoundException;import java.io.FileOutputStream; ...

  5. Nginx 1.10.2 发布，高性能 Web 服务器

    Nginx 1.10.2 发布了.Nginx(发音同 engine x)是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器 更新内容: Changes with n ...

  6. 今天第一节PS课

  7. ：before :after

    CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思 ...

  8. java filechannel大文件的读写

    java读取大文件 超大文件的几种方法 转自:http://wgslucky.blog.163.com/blog/static/97562532201332324639689/   java 读取一个 ...

  9. url路由、模板语言、ajax、用django框架创建表

    1.后台管理的左侧菜单,默认只有第一个页签下面的选项是显示的,点了别的页签再显示别的页签下面的选项,问题是:点了任何菜单的选项后,左侧菜单又成了第一个页签的选项显示,别的页签隐藏,也就是左侧的菜单刷新 ...

  10. 写简单游戏，学编程语言-python篇

    好吧, 首先得承认这个题目写的夸大了,人才菜鸟一枚,游戏相关编程也是知道点概念.但是本人对游戏开发比较感兴趣,相信大多数喜欢玩玩游戏,因为它给人确实带来很多乐趣,而编程语言的学习最少对于我来说比较乏味 ...