前端面经每日一题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!
相关推荐
无限大.3 小时前
前端知识速记:节流与防抖
前端
十八朵郁金香3 小时前
【VUE案例练习】前端vue2+element-ui,后端nodo+express实现‘‘文件上传/删除‘‘功能
前端·javascript·vue.js
学问小小谢3 小时前
第26节课:内容安全策略(CSP)—构建安全网页的防御盾
运维·服务器·前端·网络·学习·安全
LCG元3 小时前
Vue.js组件开发-实现全屏图片文字缩放切换特效
前端·javascript·vue.js
还是鼠鼠4 小时前
图书管理系统 Axios 源码__新增图书
前端·javascript·vscode·ajax·前端框架·node.js·bootstrap
还是鼠鼠7 小时前
图书管理系统 Axios 源码 __删除图书功能
前端·javascript·vscode·ajax·前端框架·node.js·bootstrap
轻口味7 小时前
Vue.js `Suspense` 和异步组件加载
前端·javascript·vue.js
m0_zj9 小时前
8.[前端开发-CSS]Day08-图形-字体-字体图标-元素定位
前端·css
还是鼠鼠9 小时前
图书管理系统 Axios 源码__编辑图书
前端·javascript·vscode·ajax·前端框架
北极象9 小时前
vue3中el-input无法获得焦点的问题
前端·javascript·vue.js