资讯专栏INFORMATION COLUMN

javascript 面向对象(实现继承的几种方式)

liujs / 2054人阅读

摘要:老明调用了从原型中继承来的方法继承到了当前对象的原型中调用了从原型中扩展来的方法构造继承基本思想借用构造函数的基本思想就是利用或者把父类中通过指定的属性和方法复制借用到子类创建的实例中。

1、原型链继承

核心: 将父类的实例作为子类的原型

缺点: 父类新增原型方法/原型属性,子类都能访问到,父类一变其它的都变了

        function Person (name) {
            this.name = name;
        };

        Person.prototype.getName = function () {    //对原型进行扩展
            return this.name;
        };

        function Parent (age) {
            this.age = age;
        };

        Parent.prototype = new Person("老明");   //这一句是关键 //通过构造器函数创建出一个新对象,把老对象的东西都拿过来。

        Parent.prototype.getAge = function () {
            return this.age;
        };

//        Parent.prototype.getName = function () {   //可以重写从父类继承来的方法,会优先调用自己的。
//            console.log(222);
//        };

        var result = new Parent(22);
        console.log(result.getName());  //老明  //调用了从Person原型中继承来的方法(继承到了当前对象的原型中)  
        console.log(result.getAge());   //22   //调用了从Parent原型中扩展来的方法
2、构造继承

基本思想
借用构造函数的基本思想就是利用call或者apply把父类中通过this指定的属性和方法复制(借用)到子类创建的实例中。
因为this对象是在运行时基于函数的执行环境绑定的。也就是说,在全局中,this等于window,而当函数被作为某个对象的方法调用时,this等于那个对象。
callapply 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

所以,这个借用构造函数就是,new对象的时候(new创建的时候,this指向创建的这个实例),创建了一个新的实例对象,
并且执行Parent里面的代码,而Parent里面用call调用了Person,也就是说把this指向改成了指向新的实例,
所以就会把Person里面的this相关属性和方法赋值到新的实例上,而不是赋值到Person上面,
所以所有实例中就拥有了父类定义的这些this的属性和方法。

因为属性是绑定到this上面的,所以调用的时候才赋到相应的实例中,各个实例的值就不会互相影响了。

核心:使用父类的构造函数来增强子类实例,等于是复制父类的实例属性给子类(没用到原型)

缺点: 方法都在构造函数中定义, 只能继承父类的实例属性和方法,不能继承原型属性/方法,无法实现函数复用,每个子类都有父类实例函数的副本,影响性能

      function Person (name) {
            this.name = name;
            this.friends = ["小李","小红"];
            this.getName = function () {
                return this.name;
            }
        };

//        Person.prototype.geSex = function () {    //对原型进行扩展的方法就无法复用了
//            console.log("男");
//        };

        function Parent = (age) {
            Person.call(this,"老明");  //这一句是核心关键
            //这样就会在新parent对象上执行Person构造函数中定义的所有对象初始化代码,
            // 结果parent的每个实例都会具有自己的friends属性的副本
            this.age = age;
        };

        var result = new Parent(23);
        console.log(result.name);    //老明
        console.log(result.friends);  //["小李", "小红"]
     console.log(result.getName());  //老明
     console.log(result.age);    //23
     console.log(result.getSex());  //这个会报错,调用不到父原型上面扩展的方法
3、组合继承

组合继承(所有的实例都能拥有自己的属性,并且可以使用相同的方法,组合继承避免了原型链和借用构造函数的缺陷,结合了两个的优点,是最常用的继承方式)

核心:通过调用父类构造,继承父类的属性并保留传参的优点,然后再通过将父类实例作为子类原型,实现函数复用

缺点:调用了两次父类构造函数,生成了两份实例(子类实例将子类原型上的那份屏蔽了)

        function Person  (name) {
             this.name = name;
             this.friends = ["小李","小红"];
         };

         Person.prototype.getName = function () {
             return this.name;
         };

        function Parent (age) {
            Person.call(this,"老明");  //这一步很关键
            this.age = age;
        };

        Parent.prototype = new Person("老明");  //这一步也很关键
        var result = new Parent(24);
        console.log(result.name);    //老明
        result.friends.push("小智");  //
        console.log(result.friends);  //["小李","小红","小智"]
        console.log(result.getName());  //老明
        console.log(result.age);    //24

        var result1 = new Parent(25);   //通过借用构造函数都有自己的属性,通过原型享用公共的方法
        console.log(result1.name);  //老明
        console.log(result1.friends);  //["小李","小红"]
4、寄生组合继承

核心:通过寄生方式,砍掉父类的实例属性,这样,在调用两次父类的构造的时候,就不会初始化两次实例方法/属性,避免的组合继承的缺点

缺点:堪称完美,但实现较为复杂

        function Person(name) {
            this.name = name;
            this.friends = ["小李","小红"];
        }

        Person.prototype.getName = function () {
            return this.name;
        };

        function Parent(age) {
            Person.call(this,"老明");
            this.age = age;
        }

        (function () {
            var Super = function () {};     // 创建一个没有实例方法的类
            Super.prototype = Person.prototype;
            Parent.prototype = new Super();     //将实例作为子类的原型
        })();

        var result = new Parent(23);
        console.log(result.name);
        console.log(result.friends);
        console.log(result.getName());
        console.log(result.age);

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/103148.html

相关文章

  • JavaScript知识点总结

    摘要:参与任何数值计算的结构都是,而且。。面向人类的理性事物,而不是机器信号。达到无刷新效果。的工作原理总是指向一个对象,具体是运行时基于函数的执行环境动态绑定的,而非函数被声明时的环境。原型对象上有一个属性,该属性指向的就是构造函数。 1.JS面向对象的理解 面向对象的三大特点:继承、封装、多态 1、JS中通过prototype实现原型继承 2、JS对象可以通过对象冒充,实现多重继承, 3...

    sean 评论0 收藏0
  • 理解原型链和原型继承

    摘要:原型链和构造函数是一种面向对象的语言,并且可以进行原型继承。来了极大的支持了工程化,它的标准让浏览器内部实现类和类的继承构造函数构造函数调用父类构造函数现在浏览器对其支持程度还不高。 原型链 原型链比作用域链要好理解的多。 JavaScript中的每个对象,都有一个内置的_proto_属性。这个属性是编程不可见的(虽然ES6标准中开放了这个属性,然而浏览器对这个属性的可见性的支持不同)...

    XboxYan 评论0 收藏0
  • 讲清楚之 javascript 对象继承

    摘要:中的继承并不是明确规定的,而是通过模仿实现的。继承中的继承又称模拟类继承。将函数抽离到全局对象中,函数内部直接通过作用域链查找函数。这种范式编程是基于作用域链,与前面讲的继承是基于原型链的本质区别是属性查找方式的不同。 这一节梳理对象的继承。 我们主要使用继承来实现代码的抽象和代码的复用,在应用层实现功能的封装。 javascript 的对象继承方式真的是百花齐放,属性继承、原型继承、...

    Jonathan Shieber 评论0 收藏0
  • JavaScript类的写法

    摘要:在中,写成类的本质基本都是构造函数原型。操作符左边是待检测类的对象,右边是定义类的构造函数。不宜用在这里,我们需要知道的几种定义类的方法,除了上面的构造函数外,还有方法用这个方法,类就是一个对象,而不是函数。 js类的基本含义 我们知道,在js中,是没有类的概念的。类的所有实例对象都从同一个原型对象上继承属性,因此,原型对象是类的核心。 类是对象的抽象,而对象是类的具体实例。类是抽象的...

    OnlyLing 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<