面向对象继承

引入

1.类和构造函数:
类就是一类事物,而对象就是一个事物(具体的事物),一类事物中包含若干的事物(而这其中的具体的事物就是对象)
2.类和对象
类是对象的抽象,而对象是类的具体实例。类是抽象的,不占用内存,而对象是具体的,占用存储空间。类是用于创建对象的,它是一个定义包括在特定类型的对象中的方法和变量的软件模板。
3.面向对象(oop) - 自定义
面向对象:面向对象的思想是把一个项目、一件事情分成更小的项目,或者说分成一个个更小的部分,每一部分负责什么方面的功能,最后再由这些部分组合而成为一个整体。
面向对象肯定包括面向过程
4.面向对象的写法
混合模块开发:构造函数+原型(prototype)
ES6新增的class开发
5.面向对象简称
面向对象开发:OOP
面向对象设计:OOD
面向对象分析:OOA

原型

Javascript规定,每一个函数都有一个prototype对象属性,指向另一个对象(原型链)。**

prototype(对象属性)的所有属性和方法,都会被构造函数的实例继承。这意味着,我们可以把那些不变(公

用)的属性和方法,直接定义在prototype对象属性上。

prototype可以让所有对象实例共享它所包含的属性和方法。也就是说,不必在构造函数中定义对象信息,而是可以直接将这些信息添加到原型中。

原型链

实例对象与原型之间的连接,叫做原型链。_proto_( 隐式连接 )

JS在创建对象的时候,都有一个叫做__proto__的内置属性,用于指向创建它的函数对象的原型对prototype。

内部原型(_proto_)和构造器的原型(prototype)

1、每个对象都有一个__proto__属性,原型链上的对象正是依靠这个属性连结在一起.

2、作为一个对象,当你访问其中的一个属性或方法的时候,如果这个对象中没有这个方法或属性,那么Javascript引擎将会访问这个对象的__proto属性所指向上一个对象,并在那个对象中查找指定的方法或属性,如果不能找到,那就会继续通过那个对象的__proto__属性指向的对象进行向上查找,直到这个链表结束。(null)

面向对象(OOP)的继承

面向对象的继承:子类继承父类,但子类不影响父类。

面向对象开发的两种方式

1.混合开发(构造函数继承+原型)–混合继承

构造函数继承call/apply+原型继承(拷贝继承/原型链继承)。

2.ES6class开发

extends关键字:

Class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。

super关键字:

子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,加上子类自己的实例属性和方法。如果不调用super方法,子类就得不到this对象。

既可以当作函数使用,也可以当作对象使用。

第一种情况,super作为函数调用时,代表父类的构造函数。

第二种情况,super作为对象时,在普通方法中,指向父类的原型对象;

class Person {
            constructor(name, age, sex) {
                this.name = name;
                this.age = age;
                this.sex = sex;
            }
            showinfo() {
                return `我的姓名是${this.name},我今年${this.age}岁,我是${this.sex}的`;
            }

            info() {
                return '我是父类的方法';
            }
        }

        let p1 = new Person('zhangsan', 100, '男');
        console.log(p1.name);
        console.log(p1.showinfo());

        class Student extends Person {
            constructor(name, age, sex, pro) {
                super(name, age, sex); //要得到与父类同样的实例属性和方法,必须先调用super方法,子类才能得到this对象
                this.pro = pro;
            }

            showinfo() {
                return super.showinfo() + ',我的专业是' + this.pro; //super当对象使用
            }
        }

        let s1 = new Student('lisi', 2500, '女', 'web');
        console.log(s1.name);
        console.log(s1.showinfo());

        console.log(typeof Person); //function  构造函数的语法糖

Prototype模式的其他验证方法

1.hasOwnProperty() : 看是不是对象自身下面的属性, 只在属性存在于实例中时才返回 true。

2.toString() :系统对象下面都是自带的 , 系统对象都有toString(),自己写的对象都是通过原型链找Object下面的,可以把对象转成字符串,可以做进制转换或者类型的判断。

3.constructor:实例对象的构造函数 (实例对象.constructor)

4.instanceof:判断一个对象是否是一个构造函数(类)的实例。

function Person(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
        }

        Person.prototype.showinfo = function() {
            return `我的姓名是${this.name},我今年${this.age}岁,我是${this.sex}的`;
        }

        Person.prototype.info = function() {
            return '我是父类的方法';
        }

        Object.prototype.name = '王五';
        Object.prototype.hehe = 'haha';


        let p1 = new Person('zhangsan', 100, '男');


        1.hasOwnProperty()  : 看是不是对象自身下面的属性, 只在属性存在于实例中时才返回 true。 
        console.log(p1.hasOwnProperty('name')); //true
        console.log(p1.hasOwnProperty('hehe')); //false

        in操作符,看是不是对象自身下面的属性,包括原型链上的。

        console.log('name' in p1);
        console.log('hehe' in p1);

        2.toString() :系统对象下面都是自带的 , 系统对象都有toString(),自己写的对象都是通过原型链找Object下面的,可以把对象转成字符串,可以做进制转换或者类型的判断。
        console.log(typeof [1, 2, 3].toString());
        let num = 10;
        console.log(num.toString(2)); //1010
        console.log(Object.prototype.toString.call([])); //[object Array]
        3.constructor:实例对象的构造函数  (实例对象.constructor)
        alert(p1.constructor);
        4.instanceof:判断一个对象是否是一个构造函数(类)的实例。
        特殊的
        console.log(Function instanceof Object);
        console.log(Object instanceof Function);
        console.log(new Array instanceof Object); //true
        console.log(new Array instanceof Function); //false
        console.log(Array instanceof Function); //true
        console.log(new Object instanceof Object);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值