20190709_JavaScript创建对象的几种方式

本文介绍了JavaScript在ES6版本之前创建对象的几种方式,包括工厂模式、构造函数模式、改进构造函数模式和原型模式等。详细阐述了每种模式的实现原理、优点和缺点,如工厂模式解决了无类问题但无法识别对象类型,构造函数模式可识别类型但占用空间大等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

JavaScript创建对象的几种方式

JavaScript的ES6版本之前的语法中没有class关键字用于创建一个类并通过该类实例化一个对象
ES6版本之前会采用几种方法创建一个对象的类

1. 工厂模式
2. 构造函数模式
3. 改进构造函数模式
4. 原型模式
5. 动态原型模式
6. 寄生构造模式
7. 稳妥构造模式

工厂模式

设计模式中的工厂模式
抽象封装了生成对象的整个过程在工厂中
生成拼装一个对象然后返回给调用者
模式的核心是Object对象的new()方法

优点
解决了JavaScript没有类的问题
createObject()方法能够接受所有构建对象的参数用于创建对象
缺点
没有办法解决对象类型识别的问题
所有的createObject工厂返回的都是Object对象
工厂模式是在Object对象的基础上加以修饰得到新的对象

	工厂模式生成对象方法代码:
	function createObject (attribute1,attribute2) {
	  	var o = new Object();
	  	o.attribute1 = attribute1;
	  	o.attribute2 = attribute2;
	  	o.function1 = function () {
	    	console.log('Function 1.');
	  	}
	  	return o;
	}

	对象类型检测代码:
	var object1 = createObject('obj','value');
	console.log(object1 instanceof createObject); 	//false
	console.log(object1 instanceof Object);       	//true

构造函数模式

JavaScript允许自定义构造函数
将对象的属性,方法直接加在构造函数的对象上

优点
可以识别对象的类型
缺点
每个MyObject对象实例都会包含MyObject的所有属性和方法
也就是创建了多少个MyObject对象便存在多少Object.function1()方法
重复的方法会很大程度上增加空间的占用

    构造函数模式生成对象方法代码:
    function MyObject (attribite1,attribute2) {
      	this.attribute1 = attribite1;
      	this.attribute2 = attribute2;
     	this.function1 = function () {
        	console.log('Function 1.');
    	}
    }
    
    对象类型检测代码:
    var myObject = new MyObject('obj','value');
	console.log(myObject instanceof MyObject); 		//true
	console.log(myObject instanceof Object);       	//true

改进构造函数模式

和构造函数模式原理基本相同
不同的是将对象的方法提升到上一层对象之中
在对象中保存的只是对上一层对象中方法的引用

优点
所有的对象共享上一层对象的同一个方法
节省了重复方法对空间的占用
缺点
对象的方法理应只能由对象本身调用
如果将对象的方法定义在上一层对象之中
那么所有作用域内的对象都可以调用此方法
如果对象的方法定义的足够多
那么将严重破坏抽象封装的设计原则

	改进构造函数模式生成对象方法代码:
    function function1(){
      console.log('Function 1.');
    }
    function MyObject (attribite1,attribute2) {
      this.attribute1 = attribite1;
      this.attribute2 = attribute2;
      this.function1 = function1;
    }
	测试调用代码:
    var myObject = new MyObject('obj','value');
    myObject.function1();		//Function 1.
    function1();				//Function 1.

原型模式

JavaScript中每个对象都有一个prototype(原型)属性
这个属性是一个指针,指向一个包含该对象实例所有共享属性和方法的对象
可以通过调用对象的构造方法创建对象实例的原型对象
那么对象将包含原型对象上的属性和方法
为对象的属性赋值时,对象上的属性会屏蔽掉原型对象上的属性

优点
所有对象共享原型对象上的属性和方法

    原型模式生成对象方法代码:
    function MyObject () {
    }
    MyObject.prototype.attribute1 = 'attribute1';
    MyObject.prototype.attribute2 = 'attribute2';
    MyObject.prototype.function1 = function () {
      console.log('Function1');
    }
    对象属性屏蔽原型属性代码:
    var myobject = new MyObject();
    myobject.attribute1 = 'new attribute1';
    console.log(myobject.attribute1); 		//new attribute1
### 回答1: JavaScript创建对象几种方式包括: 1. 对象字面量:使用花括号{}创建一个对象,可以在其中定义属性和方法。 2. 构造函数:使用关键字new和一个函数来创建一个对象,可以在函数中定义属性和方法。 3. Object.create()方法:使用一个现有的对象作为原型来创建一个新的对象,可以在新对象中添加或修改属性和方法。 4. 工厂函数:使用一个函数来创建对象,该函数返回一个新的对象,可以在函数中定义属性和方法。 5. ES6中的类:使用class关键字来定义一个类,可以在类中定义属性和方法,使用new关键字来创建一个对象。 ### 回答2: JavaScript是一门面向对象的脚本语言,因此创建对象在其中是非常重要和基础的一环。 JavaScript创建对象方式可以分为以下几种: 1. Object构造函数 Object是JavaScript中的内建构造函数,它可以创建一个空对象或者通过传递参数创建具有属性的对象。 例子: ``` var obj = new Object(); //创建一个空对象 var car = new Object(); //创建有属性的对象 car.brand = "BMW"; car.color = "blue"; ``` 2. 对象字面量 对象字面量是一种简便的创建对象方式,它可以直接将属性与属性值的对应关系写在一起,通过花括号{}进行标识。 例子: ``` var obj = {}; //创建一个空对象 var car = { //创建有属性的对象 brand: "BMW", color: "blue" }; ``` 3. 构造函数 可以使用函数作为模板来创建对象,这样的函数就被称为构造函数。通过使用new关键字去实例化这个函数创建一个对象。 例子: ``` function Car(brand, color) { //定义构造函数 this.brand = brand; this.color = color; } var myCar = new Car("BMW", "blue"); //实例化构造函数,创建对象 ``` 4. 原型 JavaScript的原型实现了面向对象的继承机制,对象继承其原型的属性和方法。因此可以通过原型来创建对象。 例子: ``` function Car() { //定义构造函数 } Car.prototype.brand = "BMW"; //在原型上定义属性 var myCar = new Car(); //实例化构造函数,创建对象 console.log(myCar.brand); //输出"BMW" ``` 以上是JavaScript创建对象几种方式,它们各自具有优点和适用范围。我们可以根据自己的实际需要,选择最适合的方式创建对象。 ### 回答3: JavaScript创建对象方式有多种,常用的有: 1.字面量方式:使用对象字面量创建对象 var person = { name: "John", age: 20, gender: "male", sayHello: function() { console.log("Hello, my name is " + this.name); } }; 2.构造函数方式:使用构造函数创建对象 function Person(name, age, gender) { this.name = name; this.age = age; this.gender = gender; this.sayHello = function() { console.log("Hello, my name is " + this.name); } } var person = new Person("John", 20, "male"); 3.原型方式:使用原型创建对象 function Person() {} Person.prototype.name = "John"; Person.prototype.age = 20; Person.prototype.gender = "male"; Person.prototype.sayHello = function() { console.log("Hello, my name is " + this.name); } var person = new Person(); 4.简单工厂方式:通过一个工厂函数创建对象 function createPerson(name, age, gender) { var person = {}; person.name = name; person.age = age; person.gender = gender; person.sayHello = function() { console.log("Hello, my name is " + this.name); } return person; } var person = createPerson("John", 20, "male"); 5.构造函数和原型组合方式:使用构造函数和原型结合创建对象 function Person(name, age, gender) { this.name = name; this.age = age; this.gender = gender; } Person.prototype = { constructor: Person, sayHello: function() { console.log("Hello, my name is " + this.name); } }; var person = new Person("John", 20, "male"); 以上是JavaScript创建对象的常见方式,不同的方式都有各自的优缺点,选择合适的方式可以提高执行效率和开发体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值