亲宝软件园·资讯

展开

JS中面向对象中的继承(常用写法)---核心部分

Louder00 人气:0

1、基本概念

子类继承父类,但是不能影响父类。包括1.混合继承(构造函数+原型) 2.ES6新增class的继承。

接下来介绍,面向对象中继承的两种常用写法。即混合继承(构造函数+原型)和class继承。推荐class继承

需要用到的知识点,构造函数、原型与原型链。

(1)构造函数:构造函数是函数、也是类。通过new调用,产生实例对象。通过实例对象访问对象下面具有的属性和方法。(构造函数内部的属性和方法都是私有的)
        属性:对象的特点,修饰对象的,私有。
        方法:对象的功能,共有的。
(2)prototype:每一个函数都有一个原型prototype对象,原型对象里面放的是对象共有属性和方法。
(3)__proto__:每一个对象都有一个__proto__属性,原型链依靠这个属性连接起来。

2、混合继承

  2.1构造函数:apply/call实现

  

function Person(name, age, sex) {//构造函数
            this.name = name;
            this.age = age;
            this.sex = sex;
        }
Person.prototype.singing = function () {//原型上的方法
            console.log('人都唱歌');
        }
function Student(name, age, sex, pro) {
            //this:实例对象,即Student类实例
            //******继承构造函数里面的属性和方法*******。
            //构造函数的继承。arguments:父类函数的参数。
            Person.apply(this, arguments);
            //Person.call(this, name, age, sex);
            this.pro = pro;
        }        

 

  2.2原型prototype:

  (1)原型链继承---最优

 //******继承原型下面的方法(原型链继承)*******。
        //父类的实例给子类的原型。
        //弊端:子类的构造函数被父类覆盖了。
        Student.prototype = new Person();
        Student.prototype.constructor = Student;//将子类的构造函数恢复

  (2)拷贝继承

第一种
for (let i in Person.prototype) { //浅拷贝,for...in...是成立的
         Student.prototype[i] = Person.prototype[i];
}
第二种
Object.assign(Student.prototype, Person.prototype);//浅拷贝

 

这样就实现了继承类里面的构造函数和原型上的方法属性,并且保留了自身的属性方法。


 

3、class继承

核心关键字:extends、super

super:

  子类必须在constructor方法中调用super()方法,否则新建实例就会报错。以及,子类自己的this对象,必须通过父类构建,也就是说如果不调用super方法,无法使用this。
super既可当函数使用,也可当对象使用。
class Person {
            constructor(name, age, sex) {//constructor:构造函数。
                this.name = name;
                this.age = age;
                this.sex = sex;
            }
            showinfo() {
                return `你的姓名是:${this.name},你今年${this.age}岁,你是${this.sex}的`;
            }
        }

class Student extends Person {
            constructor(name, age, sex, pro) {
                //继承,包括父类属性和方法  这里super当函数使用的。
                super(name, age, sex);
                this.pro = pro;
            }
            showinfo() {//重写showinfo方法
                console.log(super.showinfo() + `,我的专业是${this.pro}`);//这里super当对象使用,调用父类的方法
            }
        }
        let s1 = new Student('lisi', 200, '女', 'web开发');
        console.log(s1.name);//lisi
        s1.showinfo();//输出:你的姓名是:lisi,你今年200岁,你是女的,我的专业是web开发    

最后

大自然不需要代码,但人类需要。---作者留

 

加载全部内容

相关教程
猜你喜欢
用户评论