JavaScript 创建对象的四种方式详解

作者:拾光时间:2026-10-24 19:53:49浏览:310

本文详细介绍JavaScript中创建对象的四种核心方式:字面量、new关键字、自定义构造函数及工厂模式。重点解析new运算符执行的四步流程,对比各方法的优缺点,特别是类型识别与代码复用问题,帮助开发者根据场景选择最佳方案。

在JavaScript中,创建对象主要有以下4种方式:

  • 1. 使用字面量方式创建对象
  • 2. 使用new关键字创建对象
  • 3. 使用自定义构造函数创建对象
  • 4. 使用工厂模式创建对象

对象是指:具有属性和方法的集合。

1. 通过字面量的方式去创建对象


var person1={

    name:'柯南',

    age:12,

    sex:'男',

    eat:function(){

        console.log("我饿了,想吃饭")

    },

    say:function(){

        console.log("我叫柯南")

    }

}

console.log("person.eat输出函数",person.eat)

person.eat(); //直接输出 我饿了,想吃饭

我们需要特别注意:person.eat 和 person.eat() 的区别。

  • person.eat 的作用是输出函数本身。
  • person.eat() 的作用是调用该函数。

1. 通过字面量的方式去创建对象

2. 使用new字符创建对象


var person2=new Object();

person2.name='柯南'

person2.age='21'

person2.sex='男'

person2.eat=function(){

    console.log("我饿了,想吃饭")

}

person2.say=function(){

    console.log("我叫柯南")

}

console.log( '性别',person2.sex ) //输出男

上述前两种创建对象的方式存在以下缺点:

虽然这两种方法都可以成功创建对象,

但我们创建出来的对象无法直接判断其具体类型?

当然,我们知道它们都是 Object 类型。

为了解决类型识别问题,我们需要使用自定义构造函数来创建对象。

3. 自定义构造函数创建对象


function Person(name,age,sex,like){

    console.log('没有给like形参传递值就是undeined',like)

    // 这里的this指向的是Person这个对象

    console.log('this',this)

    this.name=name;

    this.age=age;

    this.sex=sex;

    this.say=function(){

        console.log("我叫",name)

    }

}

//这一行代码表示的是创建一个对象

//同时实例化一个对象

//并且给这个对象的属性进行初始化

//所以这一行代码并不简单

let per1=new Person('柯南',19,'男');

per1.say();

console.log(per1 instanceof Person);//true

现在我们知道per1是属于Person类型的,这就是自定义构造函数创建对象的优势:我们可以明确知道它创建的对象属于哪个类型。

ps: 构造函数通常首字母大写。


1. 通过字面量的方式去创建对象

当我们使用new创建一个对象的时候,内部做了四件事情:

通过自定义对象的创建过程,我们明白了当使用new创建一个对象时,内部执行了以下四步操作:

  • 1. 开辟空间存储当前对象。
  • 2. 把this设置为当前对象。
  • 3. 设置属性和方法。
  • 4. 把this对象返回。

4. 工厂模式创建对象


function createObj(name,age) {

    let obj=new Object();

    obj.name=name;

    obj.age=age;

    obj.sayHi=function(){

        console.log(obj.name)

    }

    return obj;

}

let per=createObj('司藤',200)

console.log(per.age); //200

per.sayHi(); //司藤

到此这篇关于 JS创建对象的四种方式的文章就介绍到这了,更多相关 JS创建对象的四种方式内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

作者最新文章