js实现继承 非es6

作者: webCoder | 来源:发表于2016-04-12 21:17 被阅读581次

    在高级语言中,面向对象是个很重要的概念。一提到面向对象,我们都会想到三大特征——封装,继承,多态。今天本文介绍的就是使用javascript实现继承。(ES6中已经支持class关键字来定义类)

    直接看源码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js 继承</title>
    </head>
    <body>
        
        <script>
            function Person(name,age) {
                this.name = name;
                this.age  = age;
            }
    
            Person.prototype.sayInfo = function(){
                console.log("Person say: name is"+this.name+",age is"+this.age);
            }
    
            function Male(name,age,gender){
                Person.call(this,name,age);
                this.gender = gender;
            }
    
            Male.prototype.sayInfo = function(){
                Person.prototype.sayInfo.call(this);
                console.log("Gender is "+this.gender);
            }
    
            var m =new Male('yinxiaofei','24','male');
            m.sayInfo();
        </script>
    </body>
    </html>
    

    特别需要注意的是子类Male中的

    Person.prototype.sayInfo.call(this);
    

    如果写成下面的代码,

    Person.prototype.sayInfo();
    

    则会打印出 :

    Person say: name is undefined,age is undefined
    

    ECMA-262 JavaScript/EcmaScript标准中, Call()方法是所有Function实例的一个成员方法,这已经被所有的主流浏览器所支持。JavaScript把所有的function看作对象,因此每个function都具有方法和附着其上的属性。Call()方法允许你调用某个function,并在function的调用过程中确定 “this”变量应该是什么。JavaScript的function没有被紧紧地绑定到它所在的对象上,所以如果你没有显式地使用call()方法, “this”变量将成为function所在的对象。
    另外一种方法是使用apply方法,它和call()方法类似,只在参数上存在不同:apply()方法接受参数的数组,而call()方法接受单个参数。
    附apply方法,特殊用途:

    求一个数组的最大值:
    Math.max.apply(null,[1,3,2]);  //3
    原理:Math.max(1,3,2);
    
    合并2个数组:
    var arr1=[1,3,4];
    var arr2=[3,4,5];
    Array.prototype.push.apply(arr1,arr2);  //返回值6  arr1变为[1,3,4,3,4,5]
    

    相关文章

      网友评论

        本文标题:js实现继承 非es6

        本文链接:https://www.haomeiwen.com/subject/dbjwlttx.html