您现在的位置是:网站首页> 编程资料编程资料
js面试题继承的方法及优缺点解答_JavaScript_
2023-05-24
439人已围观
简介 js面试题继承的方法及优缺点解答_JavaScript_
说一说js继承的方法和优缺点?
要点: 原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承、ES6 Class
答:
一、原型链继承
缺点:
- 1.引用类型的属性被所有实例共享
- 2.在创建 Child 的实例时,不能向 Parent 传参
//原型链继承 function Parent() { this.parentPrototype = "parent prototype" //验证这种继承方法的确定,如果父类示例中存在一个引用类型的属性,将会被所有子类共享 this.parentObj = { info: "我是 parent 引用属性parentObj中的 info" } } function Children() { } //将Children的原型对象指定为Parent的示例,通过原型链,将Parent中的属性赋值给Children示例 Children.prototype = new Parent(); const a = new Children(); console.log(a.parentPrototype); // parent prototype //缺点 const b = new Children(); //在a示例中改动继承的引用属性 a.parentObj.info = "我是a示例中 引用属性parentObj中的 info" //b与a示例共享引用属性 console.log(b.parentObj.info); // 我是a示例中 引用属性parentObj中的 info 二、借用构造函数(经典继承)
优点:
- 1.避免了引用类型的属性被所有实例共享
- 2.可以在 Child 中向 Parent 传参
缺点:
- 1.方法都在构造函数中定义,每次创建实例都会创建一遍方法。
function Parent() { this.parentPrototype = "parent prototype" this.obj = { info: "parent obj info" } this.fn = function () { console.log("打印功能") } } function Children() { Parent.call(this); } const a = new Children(); console.log(a.parentPrototype); // parent ptototype //缺点 此时Parent()会再次创建一个fn函数,这个是没有必要的 const b = new Children(); a.obj.info = "a obj info"; //优点 避免了子类实例共享引用属性 console.log(b.obj.info) // parent obj info; 三、组合继承
优点:
- 1.融合原型链继承和构造函数的优点,是 JavaScript 中最常用的继承模式。
function Parent() { this.parentPrototype = "我是Parent 中的属性" } //Parent中的方法,在原型上定义 Parent.prototype.pFn = function () { console.log('我是Parent中的方法'); } function Children() { //Parent中的属性仍然在构造函数中继承 Parent.call(this); } //将Children的原型对象赋值为 Parent实例,这样Parent中的方法也能够被Children继承 Children.prototype = new Parent(); const c = new Children(); console.log(c.parentPrototype); //我是Parent 中的属性 c.pFn(); //我是Parent中的方法 四、原型式继承
缺点: - 1.包含引用类型的属性值始终都会共享相应的值,这点跟原型链继承一样。
function objFn(o) { o.objFnPrototype = "我是 objFnPrototype" function F() {} F.prototype = o; return new F(); } let a = objFn({ name: "name1" }); console.log(a.name); //name1 console.log(a.objFnPrototype); //我是 objFnPrototype 五、寄生式继承
缺点:
- 1.跟借用构造函数模式一样,每次创建对象都会创建一遍方法。
function createObje(obj) { let clone = Object.assign(obj); //接受到对象后,原封不动的创建一个新对象 clone.prototype1 = "我是新增的prototype1"; //在新对象上新增属性,这就是所谓的寄生 return clone; //返回新对象 } const parent = { parentPrototype: "parentPrototype" } //c实例,就继承了parent的所有属性 let c = createObje(parent); console.log(c.parentPrototype); //parentPrototype 六、寄生组合式继承
优点:
- 1.这种方式的高效率体现它只调用了一次 Parent 构造函数,并且因此避免了在 Parent.prototype 上面创建不必要的、多余的属性。
- 2.与此同时,原型链还能保持不变;
- 3.因此,还能够正常使用 instanceof 和 isPrototypeOf。
function inherProto(superType, subType) { //拷贝一个超类的原型副本 let proto = { ...superType.prototype }; //将原型的超类副本作为子类的原型对象,也就是第一种中的原型链继承方式,只不过继承的是超类原型的副本 subType.prototype = proto; //这一步比较迷,官方的说法是,我们在拷贝超类的原型的时候,拷贝的proto对象,将会丢失默认自己的构造函数,也就是superType, //所以我们这里将它的构造函数补全为subType。貌似不做这一步也没啥问题,但是缺了点东西可能会有其他的副作用,所以还是补上 proto.constructor = subType; } function Super() { this.superProto = "super proto"; this.colors = ["red", "yelloy"]; } function Sub() { this.subProto = "sub proto"; this.name = "sub name"; //这里还是借用构造函数的套路 Super.call(this); } Super.prototype.getName = function () { console.log(this.name); } //这里要在定义完Super的属性后执行,因为继承的是超类原型的副本,与Super.prototype是两个对象,在这之后再改变Super.prototype,就已经不会在影响到Sub所继承的副本超类原型对象了 inherProto(Super, Sub); let a = new Sub(); console.log(a.getName);以上就是js面试题继承的方法及优缺点解答的详细内容,更多关于js面试题继承方法优缺点的资料请关注其它相关文章!
您可能感兴趣的文章:
相关内容
- vue路由传参接收以及传参对象为对象时的问题及解决_vue.js_
- vue关于select组件绑定的值为数字类型的问题_vue.js_
- Electron学习应用程序打包实例详解_JavaScript_
- 微信小程序创建自定义全局函数以及其调用方法详解_javascript技巧_
- Vue如何解决兄弟组件之间传值问题_vue.js_
- Vue中$router与 $route的区别详解_vue.js_
- vue获取或者改变vuex中的值方式_vue.js_
- Vue项目导入导出文件功能以及导出文件后乱码问题及解决_vue.js_
- ElementPlus el-message-box样式错位问题及解决_vue.js_
- element组件中自定义组件的样式不生效问题(vue scoped scss无效)_vue.js_
