原型和原型链

★原型

原型的类别

* 显示原型: prototype,是每个函数function;
* 隐式原型: _proto_, 是每个对象具有的属性;

构造函数、原型、实例三者之间的关系

  • 每一个构造函数都拥有一个 prototype 属性,这个属性指向一个对象,也就是原型对象
  • 原型对象默认拥有一个 constructor 属性,指向指向它的那个构造函数
  • 通过构造函数 new 就可以生成一个实例对象
  • 每个实例对象都拥有一个隐藏的属性 __proto__,指向它的原型对象
     class Student {//定义了一个类
            constructor(name, score) { //定义构造函数
                // this.name = name
                this.name = name;
                this.score = score
            }
            introduce() {//定义的方法
                console.log(`我是${this.name},考了${this.score}分。`);
            }
        }
        // student为实例对象
        const student = new Student('张三', 99);//实例化类
        console.log('student', student);
        student.introduce()

但是当只输入student的时候,我们可以发现里面只有name和score,并没有introduce这个方法 ,这个方法在

这个属性每个对象都有

打开后发现这里面有introduce方法

_proto_叫做student对象的隐式原型

也就是说当我们找一个对象的属性和方法时候,如果在当前对象上找不到,它就会去他的隐式原型上找,如果隐式原型上有这个方法,那么就会去访问这个方法,然后调用方法

那么我们可以通过student._proto_去访问

student实例是由类Student创建出来的

Student上有个属性叫 prototype属性 ,打印Student.prototype发现上面也会有introduce方法

发现两个打印出来是一样的

通过全等发现两个指向的是同一个对象

那么我们就会得到这样一幅图

实例化对象student上面的_proto_这样的一个属性,这个属性会指向一个对象,这个对象上有introduce这个方法

Student这个类上的prototype属性也会指向这个对象,这个对象上有introduce这个方法

他们两个指向的是同一个对象

原型的概念:

我们每个对象都有一个原型,这个原型一般被称为隐式原型,这个隐式原型会指向构建出这个实例的类的一个显示原型

当我们在一个对象上尝试查找一个属性或方法时如果说找不到对应的属性或方法,就会往他的隐式原型上找

原型链

什么是原型链

    class Person {
            constructor(name) {
                this.name = name;
            }
            drink() {
                console.log('喝水');
            }
        }
        class Student extends Person{//定义了一个类
            constructor(name,score) { //定义构造函数
                // this.name = name
                super(name);
                this.score = score
            }
        introduce() {//定义的方法
            console.log(`我是${this.name},考了${this.score}分。`);
        }
    }
        // student为实例对象
        const student = new Student('张三',99);//实例化类
        console.log('student',student);
        student.introduce()
        //继承
        class Teacher extends Person {
            constructor(name,subject) {
                super(name);
                this.subject = subject;
            }
            teach() {
                console.log(`我是${this.name},教${this.subject}.`);
        }
     }
        const teacher = new Teacher('某某','前端开发');
        console.log('teacher',teacher);
        teacher.teach();
        teacher.drink();

 

从上面的代码我们可以看到

teacher是通过new teacher这个类实例化出来的实例对象

这个对象上有name和subject两个属性

我可以在teacher上执行teach方法

teach方法在对象里第一层是找不到的,所以我们要到teacher这样的实例对象的原型上找,这个原型也是一个对象,上面有teach这样的属性,但是,一二层里面,我们都没有drink这样的方法,所以要再往下找,在teacher这个类继承person这个类,person这个类定义了drink这个方法

 

当我们访问一个对象的属性或方法的时候 首先从自身去找 如果找不到的话,他就会往他的原形上去找 如果原形找不到的话,它就会往自身的原形的原形上去找 ,这样形成的链式的结构,我们把它称为原型链。

拓展:如何检测一个属性或方法是不是自身的属性或方法

说明name是teacher本身的属性 

 

代表不是本身的属性或方法 它是原型上的属性或方法

为什么可以使用hasOwnProperty

teacher这个实例对象他是new teacher出来的Teacher这个类会继承Person这个类,Person这个类会继承Object这个类,Object这个类,会找到我们Person这个原型object.prototype的hasOwnProperty 

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值