IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Javascript创建对象的常用方式 -> 正文阅读

[JavaScript知识库]Javascript创建对象的常用方式

心语:不大可能的事也许今日实现,根本不可能的事也许明天会实现。

Javascript是一门面向对象的语言,万物皆对象,那么对于如何创建对象我们真的都熟悉吗?下面我将介绍一种常用的创建对象的方式。

1.字面量方式创建对象

使用字面量是平时开发中用的比较多的一种方式,因为用它创建对象比较简单易懂。在现实生活中,我们人就是一个对象,而人也拥有很多身体特征,比如 名字、年龄、性别等等

var person = {
	name:"幕筱佳",
	age:18,
	sex:"男",
	habby:["旅游","打英雄联盟","听音乐"]
}

上面就是简单的创建了一个person 对象,但是这种方式虽然创建对象比较简单,但是如果我们想创建多个不同对象,那就需要写很多重复的代码,简单暴力的代码往往难以会考虑周全。

2.工厂模式创建对象

所谓工厂模式工厂模式是用函数来封装创建对象的细节,在函数里面创建对象并返回对象,就有些像工厂里的流水线一样。工厂模式抽象了创建具体对象的过程,效率会提高很多。

function person(name,age,sex){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.sex= sex;
    o.eat= function(){
        alert(this.name+"喜欢吃西红柿");
    };
    return o;
}
var person1 = person("幕筱佳",18,"男");
var person2 = person("西门吹灯",26,"男");

缺点:工厂模式只会追求生产对象的效率,虽然解决了创建多个相似对象的问题,但却没有解决对象识别的问题(即怎样知道一个对象的类型.)。

3.构造函数创建对象

//注意:构造函数函数名首字母必须是大写的
function Person(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex= sex;
    this.eat= function(){
     console.log(this.name+"喜欢吃西红柿"); 
    };
   this.sayName= function(){
 		console.log(this.name); 
    };
}
var person1 = new Person("幕筱佳",18,"男");
var person2 = new Person("西门吹灯",26,"男");
console.log(person1.sayName());   // 幕筱佳
console.log(person2.sayName());   // 西门吹灯

缺点:

  • 从上面的代码我们可以看出不同实例对象上的同名方法其实是不一样的,person1和person2都有一个名为sayName()的方法,但那两个方法不是同一个Function的实例,创建两个完成同样任务的Function实例的确没有必要,这样就造成了代码冗余。
  • 如果对象需要定义很多方法,那么就要定义很多全局函数,这样也是很麻烦的。

4.原型模式创建对象

我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。使用原型对象的好处是可以让所有的对象实例共享他所包含的属性和方法。

function Person(){}
Person.prototype.name = '幕筱佳';
Person.prototype.age = '18';
Person.prototype.sex= '男';
Person.prototype.sayName = function(){
    console.log(this.name); 
};
var person1 = new Person();
var person2 = new Person();

//修改原型对象上name时
person1.name="西门吹灯";
//此时
console.log(person1.name);  // 西门吹灯
console.log(person2.name);  // 西门吹灯

我们会惊奇的发现,我们指修改了person1实例对象上的name,为什么person1实例对象上的name也会发生改变,其实是因为实例对象指向的是同一个构造函数的原型对象,所以会产生影响

缺点:原型模式的问题就是共享问题,在实例或原型上改变一下,在其他实例中都会相应的改变。

5.构造函数模式和原型模式组合创建对象

该方法就是结合了构造函数模式和原型模式的优点,构造函数模式用于定义实例自己的属性,原型模式用于定于方法和共享的属性。

function Person(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex= sex;
}
Person.prototype = {
    constructor: Person, //这里最后constructor指定的构造函数,不然可能会指向Object
    sayname: function(){
         console.log(this.name); 
    }
}
var person1 = new Person("幕筱佳",18,"男");
console.log(person1.sayname());   // 幕筱佳

以上是比较常用创建对象的方式,具体使用还是得根据业务场景来使用,各有利弊,希望可以帮助到各位小伙伴们 ~

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-09-12 13:04:57  更:2021-09-12 13:05:23 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/19 7:30:53-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码