创建对象和继承的多种方式

2024-06-03 01:12

本文主要是介绍创建对象和继承的多种方式,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1. 创建对象的多种方式&优缺点

1.1  工厂模式
function createPerson(name) {var o = new Object();o.name = name;o.getName = function () {console.log(this.name);};return o;
}var person1 = createPerson('kevin');优点:简单;
缺点:对象无法识别,因为所有的实例都指向一个原型;
1.2  构造函数模式
function Person(name) {this.name = name;this.getName = getName;
}function getName() {console.log(this.name);
}var person1 = new Person('kevin');解决了每个方法都要重新创建的问题
1.3  原型模式
function Person(name) {}Person.prototype.name = 'xianzao';
Person.prototype.getName = function () {console.log(this.name);
};var person1 = new Person();优点:方法不会重新创建;
缺点:
1. 所有的属性和方法都共享;
2. 不能初始化参数;
1.3.1 原型模式优化
function Person(name) {}Person.prototype = {name: 'xianzao',getName: function () {console.log(this.name);}
};var person1 = new Person();优点:封装清晰点;
缺点:重写了原型,丢失了constructor属性;
1.3.2 原型模式优化
function Person(name) {}Person.prototype = {constructor: Person,name: 'kevin',getName: function () {console.log(this.name);}
};var person1 = new Person();优点:实例可以通过constructor属性找到所属构造函数;
缺点:
1. 所有的属性和方法都共享;
2. 不能初始化参数;
1.4  组合模式
function Person(name) {this.name = name;
}Person.prototype = {constructor: Person,getName: function () {console.log(this.name);}
};var person1 = new Person();优点:该共享的共享,该私有的私有,使用最广泛的方式;
缺点:希望写在一个地方,即更好的封装性;

2.  继承多种方式&优缺点

2.1  原型继承
// ----------------------方法一:原型继承// 原型继承// 把父类的实例作为子类的原型// 缺点:子类的实例共享了父类构造函数的引用属性   不能传参var person = {friends: ["a", "b", "c", "d"]}var p1 = Object.create(person)p1.friends.push("aaa")//缺点:子类的实例共享了父类构造函数的引用属性console.log(p1);console.log(person);//缺点:子类的实例共享了父类构造函数的引用属性
2.2  组合继承
    // ----------------------方法二:组合继承// 在子函数中运行父函数,但是要利用call把this改变一下,// 再在子函数的prototype里面new Father() ,使Father的原型中的方法也得到继承,// 最后改变Son的原型中的constructor// 缺点:调用了两次父类的构造函数,造成了不必要的消耗,父类方法可以复用// 优点可传参,不共享父类引用属性function Father(name) {this.name = namethis.hobby = ["篮球", "足球", "乒乓球"]}Father.prototype.getName = function () {console.log(this.name);}function Son(name, age) {Father.call(this, name)this.age = age}Son.prototype = new Father()Son.prototype.constructor = Sonvar s = new Son("ming", 20)console.log(s);
2.3  寄生组合继承
// ----------------------方法三:寄生组合继承function Father(name) {this.name = namethis.hobby = ["篮球", "足球", "乒乓球"]}Father.prototype.getName = function () {console.log(this.name);}function Son(name, age) {Father.call(this, name)this.age = age}Son.prototype = Object.create(Father.prototype)Son.prototype.constructor = Sonvar s2 = new Son("ming", 18)console.log(s2);
2.4   ES6的extend
    // ----------------------方法四:ES6的extend(寄生组合继承的语法糖)// 子类只要继承父类,可以不写 constructor ,一旦写了,constructor 中的第一句话// 必须是 super 。class Son3 extends Father { // Son.prototype.__proto__ = Father.prototypeconstructor(y) {super(200)  // super(200) => Father.call(this,200)this.y = y}}

原文参考:前端面试题2021及答案-CSDN博客

这篇关于创建对象和继承的多种方式的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1025616

相关文章

AJAX请求上传下载进度监控实现方式

《AJAX请求上传下载进度监控实现方式》在日常Web开发中,AJAX(AsynchronousJavaScriptandXML)被广泛用于异步请求数据,而无需刷新整个页面,:本文主要介绍AJAX请... 目录1. 前言2. 基于XMLHttpRequest的进度监控2.1 基础版文件上传监控2.2 增强版多

Docker镜像修改hosts及dockerfile修改hosts文件的实现方式

《Docker镜像修改hosts及dockerfile修改hosts文件的实现方式》:本文主要介绍Docker镜像修改hosts及dockerfile修改hosts文件的实现方式,具有很好的参考价... 目录docker镜像修改hosts及dockerfile修改hosts文件准备 dockerfile 文

Linux中的计划任务(crontab)使用方式

《Linux中的计划任务(crontab)使用方式》:本文主要介绍Linux中的计划任务(crontab)使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、前言1、linux的起源与发展2、什么是计划任务(crontab)二、crontab基础1、cro

Win11安装PostgreSQL数据库的两种方式详细步骤

《Win11安装PostgreSQL数据库的两种方式详细步骤》PostgreSQL是备受业界青睐的关系型数据库,尤其是在地理空间和移动领域,:本文主要介绍Win11安装PostgreSQL数据库的... 目录一、exe文件安装 (推荐)下载安装包1. 选择操作系统2. 跳转到EDB(PostgreSQL 的

Java枚举类实现Key-Value映射的多种实现方式

《Java枚举类实现Key-Value映射的多种实现方式》在Java开发中,枚举(Enum)是一种特殊的类,本文将详细介绍Java枚举类实现key-value映射的多种方式,有需要的小伙伴可以根据需要... 目录前言一、基础实现方式1.1 为枚举添加属性和构造方法二、http://www.cppcns.co

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

Springboot处理跨域的实现方式(附Demo)

《Springboot处理跨域的实现方式(附Demo)》:本文主要介绍Springboot处理跨域的实现方式(附Demo),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录Springboot处理跨域的方式1. 基本知识2. @CrossOrigin3. 全局跨域设置4.

springboot security使用jwt认证方式

《springbootsecurity使用jwt认证方式》:本文主要介绍springbootsecurity使用jwt认证方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录前言代码示例依赖定义mapper定义用户信息的实体beansecurity相关的类提供登录接口测试提供一

springboot security之前后端分离配置方式

《springbootsecurity之前后端分离配置方式》:本文主要介绍springbootsecurity之前后端分离配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的... 目录前言自定义配置认证失败自定义处理登录相关接口匿名访问前置文章总结前言spring boot secu

SpringBoot中封装Cors自动配置方式

《SpringBoot中封装Cors自动配置方式》:本文主要介绍SpringBoot中封装Cors自动配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot封装Cors自动配置背景实现步骤1. 创建 GlobalCorsProperties