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

    在高级语言中,面向对象是个很重要的概念。一提到面向对象,我们都会想到三大特征——封装,继承,多态。今天本文介绍的就...

  • 彻底弄清js继承的几种实现方式

    js有几种经典的继承方式。比如原型链继承、构造函数继承、组合继承、寄生组合继承、ES6继承。让我们一一分析并实现。...

  • ES5和ES6中继承的不同之处

    ES5和ES6中继承的不同之处 1、JS中视没有继承的,不过可以通过构造函数或是原型等实现继承,ES5实现继承的方...

  • JS中的继承(ES5)

    前言 ES6之前,没有严格意义上的class继承, 其实JS(ES5)主要是依靠原型链来实现继承的。 既然要实现继...

  • TS中类的继承和抽象类

    类的继承 我们知道js中有继承,最开始js是使用函数来模拟实现类的,一直到ES6出现,才开启了class以及ext...

  • JS 继承的两种写法

    ES5 ES6 两种方法都能实现继承,本质上ES6继承是ES5继承的语法糖,会更简单些,但是假如要添加一个非函数的...

  • js之继承

    文章主讲 JS 继承,包括原型链继承、构造函数继承、组合继承、寄生组合继承、原型式继承、 ES6 继承,以及 多继...

  • 浅谈JavaScript原型、原型链的概念与继承的实现原理

    关于js对象的继承,es5和es6提供了两种不同的继承机制。es5通过修改原型链的方式实现继承,由此可见继承与原型...

  • 都0202年了,你还不知道javascript有几种继承方式?

    前言 当面试官问你:你了解js哪些继承方式?es6的class继承是如何实现的?你心中有很清晰的答案吗?如果没有的...

  • 关于JavaScript继承和原型链

    Before we get started 首先明确,JS的继承是由原型链来实现的。(即使在ES6中class的e...

网友评论

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

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