前端面经每日一题Day16

原型链

原型链用于实现对象继承和属性查找。

每个对象都有一个与之相关连的原型对象__proto__,这个原型对象本身也有自己的原型对象,以此类推,形成了一个链式结构,原型链。

  1. 属性查找机制:当查找对象的属性时候,如果该实例对象本身不存在该属性,沿着原型链向上查找,直至找到或者找到顶级的对象原型Object.prototype。没找到就是undefined
  2. 属性修改机制:只会修改实例对象本身的属性,如果不存在,添加该属性。如果通过原型链修改属性,会影响所有继承该原型的实例。b.prototype.x = 2

**js原型链的顶端是什么?**原型链的顶端是对象Object.prototype,它的原型是null。

Object的原型是什么? 它的原型是null。Object是一个构造函数,用于创建对象。每个通过 Object 构造函数或对象字面量语法创建的对象都继承自 Object.prototype

复制代码
let obj={}
//访问对象的原型
console.log(obj.__proto__===Object.protoype) //true
//访问Object.prototype的原型
console.log(Object.prototype.__proto__==null) //true

new做了什么操作?

1.创建一个空对象。用作即将被返回的实例。obj={}

2.设置原型链,空对象的原型赋值给构造函数的原型 Person.prototype=obj.__proto__

3.绑定this并执行构造函数。Person.call(obj) 将构造函数内部this指向空对象。

4.返回添加后的对象。

继承,多态

1继承

允许我们创建一个对象基于另一个对象,从而继承属性和方法。

1.原型链继承

复制代码
function Animal(name){
    this.name=name
}
Animal.prototype.sayhello=function(){
    console.log('hello',this.name)
}
function Dog(name,age){
    // 1. 借用构造函数继承属性
    Animal.call(this,name)
    this.age=age
}
// 2.设置子类原型为父类的一个实例,实现原型链继承
Dog.prototype=Object.create(Animal.prototype)
// 3.修正修正子类constructor属性的指向
Dog.prototype.constructor=Dog
// 4.设置子类特有方法
Dog.prototype.sayage=function(){
    console.log('my age is,',this.age)
}   
let dog1=new Dog('dog1',23)   
dog1.sayhello()
dog1.sayage() 

2.构造函数继承

复制代码
function Parent(name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}

function Child(name, age) {
  Parent.call(this, name); // 调用父类构造函数,实现属性继承
  this.age = age;
}

var child1 = new Child('Alice', 10);
var child2 = new Child('Bob', 12);

child1.colors.push('black');
console.log(child2.colors); // 输出: ['red', 'blue', 'green'](未受影响)

2 多态

同一操作作用于不同的对象上,可以产生不同的执行结果。多态性主要通过方法重写和原型继承来实现。

复制代码
function Animal(name) {
  this.name = name;
}

Animal.prototype.makeSound = function() {
  console.log('HHHHHHH');
};

function Dog(name) {
  Animal.call(this, name); // 借用构造函数继承属性
}

// Dog继承自Animal,并重写makeSound方法
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.makeSound = function() {
  console.log('Woof! Woof!');
};
let dog = new Dog('Buddy');
dog.makeSound(); // 输出: Woof! Woof!

// Cat继承自Animal,并重写makeSound方法
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;
Cat.prototype.makeSound = function() {
  console.log('Miao Miao!');
};
let cat= new Cat('cuttle');
cat.makeSound(); // 输出: Miao Miao!
相关推荐
whinc4 小时前
Node.js技术周刊 2026年第14周
javascript·node.js
这个昵称也不能用吗?4 小时前
eas 热更新相关
前端
KaMeidebaby5 小时前
卡梅德生物技术快报|葫芦科植物遗传转化:Fast‑TrACC 工程化优化:葫芦科植物遗传转化效率提升与成本控制
前端·其他·百度·新浪微博
换日线°5 小时前
vue 加入购物车抛物线动画
前端·javascript·vue.js
切糕师学AI5 小时前
为什么你的 SPA 网址必须包含 `#`?—— 前端路由 Hash 模式深度解析
前端·spa 网址·hash路由
冴羽6 小时前
超越Vibe Coding —— AI 辅助编程进阶指南
前端·javascript·ai编程
流氓也是种气质 _Cookie6 小时前
Chrome Performance常见名词解释(FP, FCP, LCP, DCL, FMP, TTI, TBT, FID, CLS)
开发语言·javascript·ecmascript
MXN_小南学前端6 小时前
自制和整理常用前端 AI Skills分享,从需求到页面(附github地址)
前端·ai编程
yuki_uix6 小时前
双 RAF + MutationObserver:微前端跳转后的滚动复原完整方案
前端
暗不需求6 小时前
一文吃透 React Context:跨层级通信的利器
前端·javascript·react.js