前端面经每日一题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!
相关推荐
CodeSheep15 分钟前
Stack Overflow,轰然倒下了!
前端·后端·程序员
i紸定i15 分钟前
解决html-to-image在 ios 上dom里面的图片不显示出来
前端·ios·vue·html·html-to-image
ai.Neo17 分钟前
(第十七期)HTML图像标签详解:从入门到精通
前端·html
阿珊和她的猫18 分钟前
autofit.js: 自动调整HTML元素大小的JavaScript库
开发语言·javascript·html
excel20 分钟前
JS 函数终极指南:this、闭包、递归、尾调用、柯里化,一次性吃透
前端
夏天想22 分钟前
html模拟websocket通信
前端
阿珊和她的猫5 小时前
v-scale-scree: 根据屏幕尺寸缩放内容
开发语言·前端·javascript
加班是不可能的,除非双倍日工资9 小时前
css预编译器实现星空背景图
前端·css·vue3
wyiyiyi10 小时前
【Web后端】Django、flask及其场景——以构建系统原型为例
前端·数据库·后端·python·django·flask
gnip10 小时前
vite和webpack打包结构控制
前端·javascript