原型以及原型链

原型

①所有引用类型都有一个__proto__(隐式原型)属性,属性值是一个普通的对象
②所有函数都有一个prototype(原型)属性,属性值是一个普通的对象
③所有引用类型的__proto__属性指向构造函数的prototype

原型链

当访问一个对象的某个属性时,会先在这个对象本身属性上查找,如果没有找到,则会去它的__proto__隐式原型上查找,即它的构造函数的prototype,如果还没有找到就会再在构造函数的prototype的__proto__中查找,这样一层一层向上查找就会形成一个链式结构,我们称为原型链。
 

 

继承

class Animal {
    constructor(name){
        this.name = name;
    }
    eat(){
        console.log('I am eating');
    }
}

class Mammalia extends Animal {
    constructor(name, age){
        super(name);
        this.name = name;
        this.age = age;
    }
}

var dog = new Mammalia('hashiqi', 5);

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3中使用的是Composition API,而不是原来的Options API,因此原型原型链的应用与Vue3+ts+setup的案例可能不太相关。不过,我们可以举一个简单的ts+class的例子来说明原型原型链的应用。 假设我们有一个Animal类: ```typescript class Animal { name: string; constructor(name: string) { this.name = name; } eat(food: string) { console.log(`${this.name} is eating ${food}.`); } } ``` 我们可以创建一个Cat类,继承自Animal类: ```typescript class Cat extends Animal { constructor(name: string) { super(name); } meow() { console.log(`${this.name} is meowing.`); } } ``` 现在我们可以创建一个cat实例: ```typescript const cat = new Cat('Kitty'); ``` 我们可以调用cat实例上的eat和meow方法: ```typescript cat.eat('fish'); // 输出:Kitty is eating fish. cat.meow(); // 输出:Kitty is meowing. ``` 在这个例子中,Animal类是Cat类的父类,Cat类从Animal类中继承了属性和方法。当我们创建一个cat实例时,该实例实际上是Animal类的一个实例,同时也是Cat类的一个实例。因此,cat实例的原型链如下所示: ``` cat -> Cat.prototype -> Animal.prototype -> Object.prototype -> null ``` 其中,cat指向Cat.prototype,Cat.prototype指向Animal.prototype,Animal.prototype指向Object.prototype,Object.prototype指向null。这个原型链可以让cat实例继承Animal类和Object类上的属性和方法。例如,我们可以调用cat实例上的toString方法: ```typescript console.log(cat.toString()); // 输出:[object Object] ``` 这是因为cat实例继承了Object.prototype上的toString方法。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值