分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

js创建对象的几种方式

发布时间:2023-09-06 01:43责任编辑:胡小海关键词:js

本来想刷一道codewar上的算法题来着,结果看了半天没搞定(捂脸逃),水平太菜伤不起啊,心里默念三声:我还会回来的。然后还是乖乖的总结一下js创建对象的几种方式:

no1. 对象字面量:

这种方法平时用的相对较多,举个栗子:

 var person={
 ??name:‘robert‘, ??job:‘web develop‘, ??sex:‘male‘, ??skill:funcion(){ ??????console.log(‘just coding‘) ?} ????????};

  这种方法简单粗暴,谁用谁知道,缺点也是相当明显,不能复用。

no2.Oject构造函数:

此方法没有汲取对象字面量的优点,而且还保留了对象字面量的缺点

var person=new Object(); ??person.name=‘robert‘; ??person.job=‘web develop‘; ??person.sex=‘male‘; ??person.skill=funcion(){ ??????console.log(‘just coding‘) ?}; ??

no3. 工厂模式:

工厂模式就有意思多了,通过封装的函数创建一个新对象,最后返回对象,还可以通过参数改变新对象的属性值。

function factory(name,job,sex){ ??var obj=new Object(); ??obj.name= name; ??obj.job= job; ??obj.sex= sex; ??obj.skill=function(){ ????????console.log(‘hello world‘) ??};
??return obj;
}
var person = factory(‘robert‘,‘web develop‘,‘male‘);

 代码可复用了,还可以定制属性值,美滋滋 

no4. 构造函数模式:

工厂模式每次都要创建一个对象并返回,构造函数模式表示完全不用那么麻烦,每次只需new一下就好了。

function Person(name,job,sex){ ??this.name= name; ??this.job= job; ??this.sex= sex; ??this.skill=function(){ ????????console.log(‘hello world‘) ??};}var person = new Person(‘robert‘,‘web develop‘,‘male‘);

no5. 原型模式:

原型模式看了构造函数模式后笑笑,怜悯地说道:‘你的方法根本就没有共享,我来改进一下吧’;

function Person(){} ??Person.prototype.name= ‘robert‘; ??Person.prototype.job= ‘web develop‘; ??Person.prototype.sex= ‘male‘; ??Person.prototype.skill=function(){ ????????console.log(‘hello world‘) ??};var person = new Person();

 不错是不错,属性和方法都共用了,并不是我们想要的,结合原型模式和构造函数模式的优点,合二为一,混合模式登场

no6. 混合模式:

多说无益,还是直接show code 好了,

function Person(name,job,sex){ ??this.name= name; ??this.job= job; ??this.sex= sex;}Person.prototype.skill=function(){ ??console.log(‘hello world‘)};var person = new Person(‘robert‘,‘web develop‘,‘male‘);

一句话总结:属性定制,方法共享

js创建对象的几种方式

原文地址:https://www.cnblogs.com/renbo/p/8454546.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved