【前端每日一题】 day3

JS的原型链如何实现继承,请写出一个例子

JavaScript中的原型链继承是通过原型(prototype)来实现的。每个对象都有一个原型(prototype),该原型又是一个对象,而这个对象又有自己的原型,以此类推,形成了一个原型链。当试图访问一个对象的属性或方法时,JavaScript会首先在该对象本身上查找,如果找不到,就会沿着原型链向上查找,直到找到相应的属性或方法,或者到达原型链的末端。

such as

javascript 复制代码
// 父类(超类)
function Animal(name) {
  this.name = name;
}

// 父类的方法
Animal.prototype.sayName = function() {
  console.log("My name is " + this.name);
};

// 子类(派生类)
function Dog(name, breed) {
  // 调用父类的构造函数
  Animal.call(this, name);
  this.breed = breed;
}

// 继承父类的原型
Dog.prototype = Object.create(Animal.prototype);

// 重设子类的构造函数,否则会指向父类
Dog.prototype.constructor = Dog;

// 子类的方法
Dog.prototype.bark = function() {
  console.log("Woof!");
};

// 创建一个实例
var myDog = new Dog("Max", "Labrador");

// 调用父类的方法
myDog.sayName(); // 输出:"My name is Max"

// 调用子类的方法
myDog.bark(); // 输出:"Woof!"

Animal 是一个父类,拥有一个属性 name 和一个方法 sayName。

Dog 是一个子类,通过调用父类的构造函数 Animal.call(this, name) 继承了父类的属性,并通过 Object.create(Animal.prototype) 继承了父类的方法。

在子类中,还可以定义自己的方法,比如 bark。

最后,通过创建 Dog 类的实例 myDog,我们可以看到实现了继承关系,并且可以调用父类和子类的方法。

相关推荐
独泪了无痕2 小时前
使用Fetch API 探索前后端数据交互
前端·http·交互设计
css趣多多2 小时前
别名路径的知识点
前端
靓仔建4 小时前
Vue3导入组件出错does not provide an export named ‘user_setting‘ (at index.vue:180:10)
开发语言·前端·typescript
EnoYao4 小时前
我写了一个团队体检报告 Skill,把摸鱼的同事扒出来了😅
前端·javascript
梁正雄4 小时前
Python前端-2-css练习
前端·css·python
清汤饺子4 小时前
用 Cursor 半年了,效率还是没提升?是因为你没用对这 7 个功能
前端·后端·cursor
蓝莓味的口香糖4 小时前
【vue3】组件的批量全局注册
前端·javascript·vue.js
wefly20174 小时前
开发者效率神器!jsontop.cn一站式工具集,覆盖开发全流程高频需求
前端·后端·python·django·flask·前端开发工具·后端开发工具
独泪了无痕5 小时前
自动导入 AutoImport:告别手动引入依赖,优化Vue3开发体验
前端·vue.js·typescript
GDAL5 小时前
MANIFEST.in简介
linux·服务器·前端·python