原型

作者: 酒暖花深Q | 来源:发表于2020-09-09 10:13 被阅读0次

class 和 继承

子类通过extendssuper 继承父类中的属性和方法
StudentTearcher可以继承people中的nameeat()方法

<script>
        //父类 
        class People {
            constructor(name) {
                this.name = name
            }
            eat() {
                // console.log(this.name + 'eat something')
                console.log(` ${this.name} eat something`)
            }
        }
        // 子类
        class Student extends People{
            constructor(name, number){
                super(name);
                this.number = number
            }
            sayHi(){
                console.log(`姓名 ${this.name} , 学号 ${this.number}`)
            }
        }
        //子类
        class Teacher extends People{
            constructor(name,major){
                super(name);
                this.major = major;
            }
            teach (){
                console.log(`姓名 ${this.name} 教 ${this.major}`) 
            }
        }

        const xialuo = new Student('夏洛','100');
        console.log(xialuo.name)
        console.log(xialuo.number)
        xialuo.sayHi()
        xialuo.eat()
        const laowang = new Teacher('王老师','语文');
        console.log(laowang.name)
        console.log(laowang.major)
        laowang.teach()
        laowang.eat();

        console.log('xialuo.__proto__ 隐式原型 --->'+ JSON.stringify( xialuo.__proto__));
        console.log('Student.prototype 显式原型 --->'+ JSON.stringify(Student.prototype));
Student.prototype === xialuo.__proto__  // true
    </script>

为了好理解可以画图

1.png
xlaluo__proto__Studentprototype指向同一个sayHi();

原型关系

1.每个class都有一个显式的prototyp

2.每个实例都有一个隐式 __proto__

3.实例的 __proto__ 指向对应的classprototyp

执行规则

  1. 获取实例属性xialuo.name或执行方法sayHi()

  2. 先在自身属性和方法中寻找

3.找不到则自动到隐式原型中寻找。如 xialuo中的namenumber是在自身中寻找。sayHi()是在 Student中寻找

相关文章

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

  • JavaScript 原型和原型链

    原型 在 JavaScript 中,我们所称的原型有两个使用语境: 原型关系 原型属性 原型关系指对象的原型对象,...

  • JavaScript 原型和原型链

    原型 在 JavaScript 中,我们所称的原型有两个使用语境: 原型关系 原型属性 原型关系指对象的原型对象,...

  • 原型、原型链

    (什么是原型、原型链?有什么作用) JavaScirpt深入之从原型到原型链 图解 Javascript 原型链 ...

  • 关于原型原型链的理解

    什么是原型? 什么是原型链? 为什么需要原型,和原型链?

  • js的原型对象&原型链&js的继承

    原型对象 & 原型链 原型对象分2种:显式原型和隐式原型。 显式原型就是我们常用的prototype属性,是函数的...

  • 4.4 JavaScript

    4.4.1. 原型链 4.4.1.1. 显式原型和隐式原型   JavaScript的原型分为显式原型(expli...

  • 原型、原型链

    理解JavaScript原型 彻底理解JavaScript原型 原型 原型是一个对象,所有对象都可以成为原型,其...

  • 廖雪峰JS小记

    (function(){})() 原型,原型链 浅谈Js原型的理解JS 原型与原型链终极详解 对象 对象:一种无序...

  • 2-6 原型和原型链 - 5个原型规则

    2-6 原型和原型链 - 5个原型规则 5条原型规则,原型规则是学习原型链的基础。 第一、所有引用类型(数组、函数...

网友评论

      本文标题:原型

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