美文网首页
javaScript中的面向对象思想之继承

javaScript中的面向对象思想之继承

作者: 开韦 | 来源:发表于2017-04-21 13:10 被阅读0次

    三、继承
    1、继承是面向对象(OO)语言中的一个概念,许多面向对象语言都支持两种继承方式:接口继承和实现
    继承。而ECMAScript中只支持实现继承,而且其现实继承主要依靠原型链来实现的。

    2、调用call和apply函数来实现继承
    <script type="text/javascript">
    //函数的调用方法:既可以使用函数名+小括号的形式调用也可以使用函数名+call()的形式调用
    function hello(a,b,c){
    console.log(this);
    console.log(a);
    console.log(b);
    console.log(c);
    }
    //hello();
    //hello.call ();
    //两种调用方式的区别:
    // 小括号调用:如果向小括号中传参数,则该参数一定是函数所需的参数
    //call()调用:如果向call的小括号中传参, 则参数一定是一个对象,call会把所调函数中的this指针指
    到该参数上;
    var per={
    name:'xiaoXuan',
    age:24
    }
    hello(per,'12',34);
    hello.call(per,per,'12',34);
    hello.apply(per,[per,'12',34]);
    </script>

    3、原型实现继承
    <script type="text/javascript">
    function CreateAnimal(name,age){
    this.name=name;
    this.age=age;
    }
    function CreatePerson(name,age,gender){
    this.gender=gender;
    }
    CreatePerson.prototype=new CreateAnimal('zhangsan',100);
    CreatePerson.prototype.constructor=CreatePerson;
    var per=new CreatePerson('zhangsan',100,'man');
    console.log(per);
    </script>

    4、组合继承
    <script type="text/javascript">
    // 使用call/apply实现对实例属性的继承
    // 使用原型实现对原型方法的继承
    function CreateAnimal(name, age) {
    this.name = name;
    this.age = age;
    }
    CreateAnimal.prototype.sayHi = function () {
    alert('hello');
    }
    function CreatePerson(name, age, gender) {
    CreateAnimal.call(this, name, age);
    this.gender = gender;
    }
    CreatePerson.prototype = new CreateAnimal();
    CreatePerson.prototype.constructor = CreatePerson;
    CreatePerson.prototype.eatFood = function () {
    alert('吃饭了');
    }
    var per = new CreatePerson('xiaoQuan', 18, 'man');
    // console.log(per.gender);
    per.eatFood();
    </script>

    5、冒充继承
    <script type="text/javascript">
    function CreateAnimal(name, age) {
    this.name = name;
    this.age = age;
    }
    CreateAnimal.prototype.sayHi = function () {
    alert('hello');
    }
    function CreatePerson(name, age, gender) {
    // 1、让父级构造函数作为自己对象的方法
    this.newFn = CreateAnimal;
    // 2、使用this调用该方法:需要让方法中的指针指向per对象
    this.newFn(name, age);
    // 3、把临时添加的方法删掉
    delete this.newFn;
    this.gender = gender;
    }
    var per = new CreatePerson('xiaoQuan', 18, 'man');
    console.log(per);
    per.sayHi();
    </script>

    相关文章

      网友评论

          本文标题:javaScript中的面向对象思想之继承

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