JS原型继承子类跟父类有相同属性但并不一定会覆盖

本文探讨了JavaScript中原型继承的机制,特别是当子类与父类存在相同属性时是否会发生覆盖的问题。通过具体示例代码说明,在不同情况下属性如何被处理,并解释了为何子类属性不一定总是覆盖父类属性。

JS原型继承子类跟父类有相同属性但并不一定会覆盖

完成老师布置的作业时有疑惑,因为老师课堂讲的时候是这样说的。
// 如果父对象和子对象同时具有相同的属性
// 输出的时候,子对象的属性会覆盖父对象的属性进行输出
这是老师课堂上讲的对应的代码:

var person = function(){};
		person.prototype.say=function(){
			alert("天气挺好!");
		}
		person.prototype.gongzi=500;

		var programmer=function(){};
		programmer.prototype=new person();//只是将programmer更换成实例person的对象
		programmer.prototype.wcd=function(){
			alert("明天天气也不错!");
		}
		programmer.prototype.gongzi=1000;

		var p = new programmer();//p是由programmer实例创建的
		p.say();
		p.wcd();
		alert(p.gongzi);

调用父类方法、调用自己的方法都没有问题,因为继承了。

下面是作业题
在这里插入图片描述
因为在学面向对象的内容有点乱,当时我选的是CD,正确答案是BC。
上面的两个案例的代码很像,唯一不同的地方就父类的创建实例代码是在子类自有属性前面还是后面,如果是在子类前面,那么子类跟父类共有属性则会覆盖父类的。如果是在后面,刚子类只能继承父类的属性。

JavaScript 的类继承中,子类可以通过 `super` 关键字访问父类属性方法JavaScript 的类继承机制基于原型(prototype),但使用 `class` 和 `extends` 提供了更清晰、更接近传统面向对象语言的语法[^1]。 ### 通过 `super` 访问父类属性子类的构造函数中,必须首先调用 `super()` 才能访问 `this`。这是因为子类实例的构建依赖于父类构造函数的执行。此外,`super` 还可用于调用父类方法和获取属性。 ```javascript class Animal { constructor(name) { this.name = name; } speak() { console.log(`${this.name} makes a noise.`); } } class Dog extends Animal { constructor(name, breed) { super(name); // 调用父类的构造函数 this.breed = breed; } describe() { console.log(`${super.name} is a ${this.breed}`); // 使用 super 访问父类属性 } } const buddy = new Dog('Buddy', 'Golden Retriever'); buddy.speak(); // 输出: Buddy makes a noise. buddy.describe(); // 输出: Buddy is a Golden Retriever ``` ### 静态方法与 `super` 除了实例属性方法,静态方法也可以通过 `super` 在子类中访问: ```javascript class Animal { static planet = "Earth"; static info() { console.log(`Animals live on ${this.planet}`); } } class Dog extends Animal { static info() { super.info(); // 调用父类的静态方法 } } Dog.info(); // 输出: Animals live on Earth ``` ### 原型链中的属性访问 JavaScript 中每个对象都有一个内部链接指向另一个对象,即其原型。当访问一个对象的属性时,如果该对象本身没有这个属性JavaScript 引擎会沿着原型链查找,直到找到该属性或到达原型链的末端[^2]。 ### 箭头函数与 `super` 需要注意的是,箭头函数不能作为构造函数,并且它们不绑定自己的 `this`、`arguments`、`super` 或 `new.target`。因此,在类的方法中使用箭头函数时,`super` 将引用外围作用域中的 `super` 上下文: ```javascript class Animal { constructor(name) { this.name = name; } } class Dog extends Animal { logName = () => { console.log(super.name); // 正确引用到父类的 name 属性 }; } const buddy = new Dog('Buddy'); buddy.logName(); // 输出: Buddy ``` 这种行为使得箭头函数在某些情况下非常适合用于类的方法定义,特别是在需要保持 `this` 指向不变的情况下。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值