js实现继承 非es6

2023年9月30日 218次阅读 来源: webCoder

在高级语言中，面向对象是个很重要的概念。一提到面向对象，我们都会想到三大特征——封装，继承，多态。今天本文介绍的就是使用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]
    原文作者：webCoder
    原文地址: https://www.jianshu.com/p/f64c6a85419d
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞