设置对象的prototype以及super的使用

本文探讨了JavaScript中对象原型链的实现方式,包括使用Object.create、Object.setPrototypeOf及__proto__属性来设置对象原型,以及如何通过super关键字访问原型链中的方法。

Object.getPrototypeOf/Object.setPrototypeOf()

let book1 = {
	getbook(){
		return "javascript";
	}
};
let book2 = {
	getbook(){
		return "html5";
	}
}
let book = Object.create(book1);
console.log(book.getbook());//javascript
console.log(Object.getPrototypeOf(book) === book1);//true

Object.setPrototypeOf(book,book2);
console.log(book.getbook());//html5
console.log(Object.getPrototypeOf(book) === book2);//true

我们定义了2个对象book1和book2,都有getbook()这个方法。
我们使用Object.create(obj,propertiesObject)创建一个新的对象book,参数obj为对象的原型,第二个为可选参数是对象的属性对象,这样我们就设置了一个原型为book1的对象。使用Object.getPrototypeOf(book)去获取对象的原型,发现就是book1,所以返回的是true,在调用book.getbook()方法就会调用原型链book1的getbook()方法,当我们用Object.setPrototypeOf(book,book2);设置book对象的原型为book2,我们再次调用getbook()方法,此时已经重新设置了book对象的原型,所以会调用book2中的getbook()方法。

proto

let book1 = {
	getbook(){
		return "javascript";
	}
};
let book2 = {
	getbook(){
		return "html5";
	}
};
let book = {
	__proto__:book1
}
console.log(book.getbook());//javascript
book.__proto__ = book2;
console.log(book.getbook());//html5

之前我们通过Object.setPrototypeOf去设置对象的原型,es6中可以直接使用__proto__属性设置对象原型

super

let book1 = {
	getbook(){
		return "javascript";
	}
};
let book = {
	__proto__:book1,
	getbook(){
		return super.getbook() + 'css3';
	}
}
console.log(book.getbook());//javascript

我们可以使用super.访问原型链中的方法

### JavaScript 中对象继承的使用方法及 `$super` 属性的作用 #### 1. **JavaScript 对象继承的基础** 在 JavaScript 中,对象继承主要依赖于原型链的概念。通过设置对象的 `prototype` 属性指向父对象的一个实例,可以让子对象继承父对象的属性和方法[^1]。 以下是基于原型链继承的经典例子: ```javascript function Parent() { this.name = 'Parent'; } Parent.prototype.greet = function () { console.log(`Hello from ${this.name}`); }; function Child() { this.name = 'Child'; } Child.prototype = new Parent(); const childInstance = new Child(); childInstance.greet(); // 输出 "Hello from Child" ``` 此方法的优点在于其实现简单,适用于属性和方法较少的对象;但它的缺点也很明显——无法向父构造函数传递参数,并且所有子实例共享父对象的引用类型属性,容易造成数据污染[^1]。 --- #### 2. **改进版:组合继承(Constructor + Prototype Inheritance)** 为了解决单纯依靠原型链继承存在的问题,通常会结合构造函数继承与原型链继承的优势。具体来说,就是在子类中调用父类的构造函数以初始化实例属性,同时让子类的原型继承自父类的原型。 下面是一个典型的组合继承示例: ```javascript function Parent(name) { this.name = name; this.colors = ['red', 'blue']; } Parent.prototype.greet = function () { console.log(`Hello from ${this.name}`); }; function Child(name, age) { Parent.call(this, name); // 使用 apply/call 方法调用父类构造函数 this.age = age; } Child.prototype = Object.create(Parent.prototype); Child.prototype.constructor = Child; Child.prototype.describe = function () { console.log(`${this.name} is ${this.age} years old.`); }; const childInstance = new Child('Alice', 25); childInstance.greet(); // Hello from Alice childInstance.describe(); // Alice is 25 years old. childInstance.colors.push('green'); // 修改不会影响其他实例 console.log(childInstance.colors); // ["red", "blue", "green"] ``` 这种方法既解决了参数传递的问题,又避免了多个实例间共享可变状态的风险[^2]。 --- #### 3. **ES6 类语法下的继承机制** 随着 ES6 的推出,JavaScript 提供了一种更加简洁优雅的方式来表达继承关系——即通过 `class` 和 `extends` 关键字实现。实际上,这仍然建立在原型的基础上,只不过提供了一个更高层次的抽象[^3]。 以下是如何利用 ES6 类语法完成继承的例子: ```javascript class ParentClass { constructor(name) { this.name = name; } greet() { console.log(`Hello from ${this.name}`); } } class ChildClass extends ParentClass { constructor(name, age) { super(name); // 必须先调用 super 初始化父类部分 this.age = age; } describe() { console.log(`${this.name} is ${this.age} years old.`); } } const instance = new ChildClass('Bob', 30); instance.greet(); // Hello from Bob instance.describe(); // Bob is 30 years old. ``` 这里的关键点在于必须在子类构造器中调用 `super()` 来初始化父类的部分,这是因为在创建派生类实例时,首先需要将父类的状态复制到新实例上[^5]。 --- #### 4. **关于 `$super` 属性的作用** 正如前面提到过的,严格意义上讲,JavaScript 并未定义任何叫做 `$super` 的内置属性或关键字。不过,在实际开发过程中,有时开发者会选择自行实现这样一个机制作为对原生 `super` 功能的一种补充或者替代方案[^4]。 比如我们可以这样手动绑定 `$super` 到具体的父级方法上调用: ```javascript function Parent() {} Parent.prototype.methodA = function () { return 'From Parent A'; }; Parent.prototype.methodB = function () { return 'From Parent B'; }; function Child() { let self = {}; Object.setPrototypeOf(self, Parent.prototype); self.$super = (methodName, ...args) => Parent.prototype[methodName].apply(self, args); return self; } let c = Child(); console.log(c.$super('methodA')); // From Parent A console.log(c.$super('methodB')); // From Parent B ``` 虽然这样的做法能够带来一定的灵活性,但由于缺乏统一标准支持,不建议广泛应用于生产环境之中[^5]。 --- ### 总结 综上所述,JavaScript 支持多种方式来达成对象间的继承效果,从传统的原型链模型到现代化的类声明形式都有各自的特点与适用场合。至于所谓 `$super` 属性,则更多属于一种非正式的设计模式而非语言本身固有的组成部分。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值