js创建对象的多种方式及优缺点

在js中,如果你想输入一个的信息,例如姓名,性别,年龄等,如果你用值类型来存储的话,那么你就必须要声明很多个变量才行,变量声明的多了的话,就会造成变量污染。所以最好的方式就是存储到对象中。下面能我就给大家介绍几种创建对象的方式,并且给大家说一下他们的优缺点

方式一:对象字面量

var obj={name:"赵云",type:"突进",skill:"抢人头"}

缺点:只能创建一次对象，复用性较差，如果要创建多个对象，代码冗余度太高

方式二:使用内置构造函数

var obj=new Object();obj.name="李白";obj.type="刺客";obj.skill="舞剑";

缺点:只能创建一次对象，复用性较差，如果要创建多个对象，代码冗余度太高

方式三:工厂模式(不推荐使用)

function creat(name,type,skill){var obj=new Object();obj.name=name;obj.type=type;obj.skill=skill;obj.say=function(){console.log("黄河之水天上来");}return obj;}var hero=creat("李白","刺客","写诗");var heroNext=creat("赵云","突进","将军");

缺点：对象无法识别，因为所有的实例都指向一个原型

方法四:构造函数模式

function Person(singer,song,type){//默认吧this传给new出来的对象,并且默认是返回该对象this.singer=singer;this.song=song;this.type=type;}var obj=new Person("田馥甄","小幸运","流行歌");console.log(obj);

注意点:1.如果不写返回值，默认返回的是新创建出来的对象（一般都不会去写这个return语句）

　　　 2.如果我们自己写return语句 return的是空值（return;），或者是基本类型的值或者null，都会默认返回新创建出来的对象

　　　 3.如果返回的是object类型的值，将不会返回刚才新创建的对象，取而代之的是return后面的值

优点:实例时可以识别为一个特定的类型

缺点:构造函数中定义函数，那么每次创建对象，都会重新创建该函数,这样会导致全局变量增多，造成污染,代码结构会混乱,不易维护

方法五:原型

 function Person(name, age, gender) {this.name = name;this.age = age;this.gender = gender;}var p =new Person("张学友",18,"male");var p1 = new Person("刘德华",19,"male");Person.prototype.sayHello = function () {console.log("你好我是" + this.name);}Person.prototype["sing"] = function () {console.log("一千个伤心的母牛");}p.sayHello();p1.sayHello();p.sing();p1.sing();

优点:说明:构造函数的原型对象中的成员，可以被该构造函数创建出来的所有对象访问,而且，所有的对象共享该对象,所以，我们可以将构造函数中需要创建的函数，放到原型对象中存储,这样就解决全局变量污染的问题以及代码结构混乱的问题

缺点:不能初始化参数

转载于:https://www.cnblogs.com/cythia/p/6958021.html

js创建对象的多种方式及优缺点相关推荐

创建对象的多种方式以及优缺点
写在前面这篇文章讲解创建对象的各种方式,以及优缺点. 但是注意: 这篇文章更像是笔记,因为<JavaScript高级程序设计>写得真是太好了! 1. 工厂模式 function crea ...
vue引用js文件的多种方式
本文主要介绍了vue引用js文件的多种方式,本文大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 1.vue-cli webpack全局引入jquery (1) 首先 npm inst ...
vue引用js文件的多种方式(推荐)
vue引用js文件的多种方式(推荐) Day_by_day93 这篇文章主要介绍了vue引用js文件的多种方式,本文大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 1.vue-cli ...
JavaScript继承的多种方式和优缺点
1.原型链继承 function Parent () {this.name = '张三'; }Parent.prototype.getName = function () {console.log(t ...
JS遍历数组的多种方式
JS遍历数组的多种方式 1. 普通for循环 for (let i = 0; i < arr.length; i++){//code} 应用最为普遍的循环写法,性能好,可读性好. 2. 优化版f ...
js小学生图区_多种方式实现js图片预览
js多种方式图片预览-持续更新 //设置自己的变量存储区 var Util = { file : $("#file"), image_show:$("#img_show& ...
【JS】——数组拼接的多种方式包括ES6写法
1. 前言很多时候的我们需要进行数组的拼接,再此就整理了js的数组多种拼接方式. 2. 数据准备需要拼接的数组,简单例子 let num = [1,2,3]; let numTemp = [3,3 ...
TS学习笔记04 JS创建对象的方式
TS学习笔记04 JS创建对象的方式首先我们回顾下JS中创建对象的方式比如说我按照下面的创建了两个对象分别为stu1和stu2,比如说我现在想给这两个对象都添加一个新的方法,但是这两个对象 ...
蓝鸥原生JS：js的历史及JavaScript的优缺点
蓝鸥原生JS:js的历史及JavaScript的优缺点蓝鸥零基础学习HTML5-html+css基础 http://11824614.blog.51cto.com/11814614/1852769 ...
JavaScript中的几种继承方式及优缺点,你知道多少呢？
原文连接:JavaScript中的几种继承方式及优缺点,你知道多少呢? 继承也是前端里面的重要的一个知识点,在实际工作中或者面试中也会经常的遇到,那么通过这篇文章我们详细的了解一下继承的几种方式以及各 ...

js创建对象的多种方式及优缺点

js创建对象的多种方式及优缺点相关推荐

最新文章

热门文章