JavaScript创建类/对象的几种方式概述及实例

在JS中，创建对象（Create Object）并不完全是我们时常说的创建类对象，JS中的对象强调的是一种复合类型，JS中创建对象及对对象的访问是极其灵活的。

JS对象是一种复合类型，它允许你通过变量名存储和访问，换一种思路，对象是一个无序的属性集合，集合中的每一项都由名称和值组成（听起来是不是很像我们常听说的HASH表、字典、健/值对？），而其中的值类型可能是内置类型(如number,string)，也可能是对象。
一、由一对大括号括起来


代码如下:

var emptyObj = {};
var myObj =
{
'id': 1, //属性名用引号括起来，属性间由逗号隔开
'name': 'myName'
};
//var m = new myObj(); //不支持

　不知你注意到对象都是用 var 声明的没有，像上面的代码，就只是简单的声明一个对象，它只有一份拷贝，你不能像实例化类对象一样对它采用new操作，像上面代码的注释部分。这样就极大的限制了对象的重用，除非你建立的对象只需要一份拷贝，否则考虑用其他方法建立对象。
　　下面一起看看如何访问对象的属性和方法。


代码如下:

var myObj =
{
'id': 1,
'fun': function() {
document.writeln(this.id + '-' + this.name);//以"对象.属性"方式访问
},
'name': 'myObj',
'fun1': function() {
document.writeln(this['id'] + '+' + this['name']);//以集合方式访问
}
};
myObj.fun();
myObj.fun1();
// 结果
// 1-myObj 1+myObj

二、用 function 关键字模拟 class
在 function 中用 this 引用当前对象，通过对属性的赋值来声明属性。如果用var声明变量，则该变量为局部变量，只允许在类定义中调用。


代码如下:

function myClass() {
this.id = 5;
this.name = 'myclass';
this.getName = function() {
return this.name;
}
}
var my = new myClass();
alert(my.id);
alert(my.getName());
// 结果
// 5
// myclass

三、在函数体中创建一个对象，声明其属性再返回
在函数体中创建对象可利用第一点的方法，或先 new Object(); 再为各属性赋值。
不过用这种方式创建的对象在VS2008 SP1中是没有智能提示的。


代码如下:

function myClass() {
var obj =
{
'id':2,
'name':'myclass'
};
return obj;
}
function _myClass() {
var obj = new Object();
obj.id = 1;
obj.name = '_myclass';
return obj;
}
var my = new myClass();
var _my = new _myClass();
alert(my.id);
alert(my.name);
alert(_my.id);
alert(_my.name);
// 结果
// 2
// myclass
// 1
// _myclass

赞 (0)

相关推荐

  • JS创建类和对象的两种不同方式

    在JavaScript中, 当你定义了一个新的函数, 你实际上声明了一个新的类, 而这个函数本身就相当于类的构造函数.下面的代码向你展示了两种不同的方式来创建一个新的Person类, 而Person.prototype的定义也紧跟在函数定义之后. var Person = function(name) { // 一个匿名函数, 并将这个函数赋值给一个Person变量, 此时Person成为一个类 this.name = name; } function Person(name) { // 直接定

  • JavaScript 创建对象和构造类实现代码

    创建一个对象 Java代码 复制代码 代码如下: <script type="text/javaScript"> var newObject=new Object(); //创建一个对象 newObject.firstName="frank"; //增加一个firstName属性 newObject.sayName=function(){ alert(this.firstName); } //添加一个sayName方法 //调用sayName方法 //

  • 创建js对象和js类的方法汇总

    代码很简单,就不多废话了. 复制代码 代码如下: //第一种定义方式 var person=new Object(); //创建了一个对象. person.name="tom"; //使用person对象对调用name属性,它的值为tom alert(person.name); //显示name属性值 person.say=function(){ //对person对象添加了一个say函数. alert("person say"); }; person.say();

  • JavaScript 常见对象类创建代码与优缺点分析

    在Javascript中构建一个类有好几种方法: 1.Factory 方式 复制代码 代码如下: function createCar(){ var car = new Object(); car.color="b"; car.length=1; car.run=function(){alert("run");} return car; } 定义这么一个函数之后,就可以用: var car1 = createCar(); var car2 = createCar()

  • JavaScript中创建类/对象的几种方法总结

    在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活的. JS对象是一种复合类型,它允许你通过变量名存储和访问,换一种思路,对象是一个无序的属性集合,集合中的每一项都由名称和值组成(听起来是不是很像我们常听说的HASH表.字典.健/值对?),而其中的值类型可能是内置类型(如number,string),也可能是对象. 一.由一对大括号括起来 复制代码 代码如下: var emptyObj = {

  • 跟我学习javascript创建对象(类)的8种方法

    8中javascript创建对象(类)的方法,依依介绍给大家,希望大家喜欢. 1. 使用Object构造函数来创建一个对象 下面代码创建了一个person对象,并用两种方式打印出了Name的属性值. var person = new Object(); person.name="kevin"; person.age=31; alert(person.name); alert(person["name"]) 上述写法的另外一种表现形式是使用对象字面量创建一个对象,不要

  • Javascript创建类和对象详解

    现总结一下Javascript创建类和对象的几种方法: 1.原始的创建方法: <script type="text/javascript"> var person = new Object(); person.name="Amy"; person.sex="Woman"; person.show=function(){ document.write("name is: "+this.name+" ; se

  • JavaScript创建类/对象的几种方式概述及实例

    在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活的. JS对象是一种复合类型,它允许你通过变量名存储和访问,换一种思路,对象是一个无序的属性集合,集合中的每一项都由名称和值组成(听起来是不是很像我们常听说的HASH表.字典.健/值对?),而其中的值类型可能是内置类型(如number,string),也可能是对象. 一.由一对大括号括起来 复制代码 代码如下: var emptyObj = {

  • JavaScript常用截取字符串的三种方式用法区别实例解析

    stringObject.substring(start,stop) 用于提取字符串中介于两个指定下标之间的字符. start必需.一个非负的整数,规定要提取的子串的第一个字符在 stringObject 中的位置. stop可选.一个非负的整数,比要提取的子串的最后一个字符在 stringObject 中的位置多 1.如果省略该参数,那么返回的子串会一直到字符串的结尾. start从0开始 到stop(不包含stop)结束 不接受负的参数. stringObject.substr(start,

  • javaScript中定义类或对象的五种方式总结

    第一种方式: 工厂方法 能创建并返回特定类型的对象的工厂函数(factory function). function createCar(sColor){ var oTempCar = new Object; oTempCar.color = sColor; oTempCar.showColor = function (){ alert(this.color); }; return oTempCar; } var oCar1 = createCar(); var oCar2 = createCa

  • 比较JavaScript对象的四种方式

    目录 前言 引用比较 手动比较 浅层比较 深层比较 总结 前言 比较JavaScript中的原始值非常简单.只需使用任何一种可用的相等运算符即可,例如严格相等运算符: 'a' === 'c'; // => false 1 === 1; // => true 但是对象却有结构化数据,所以比较起来比较困难.在本文中,你将学习如何正确比较JavaScript中的对象. 引用比较 JavaScript 提供了 3 种对值进行比较的方法: 严格相等运算符=== 宽松相等运算符== Object.is()

  • JavaScript 对象的四种方式比较详解

    目录 前言 1. 引用比较 2. 手动比较 3. 浅层比较 4. 深层比较 5. 总结 前言 比较 JavaScript 中的值非常简单,只需用相等运算符即可,例如严格相等运算符: 'a' === 'c'; // => false 1 === 1; // => true 但是对象却有结构化的数据,所以比较起来比较困难.在本文中,你将学习如何正确比较 JavaScript 中的对象. 1. 引用比较 JavaScript 提供了 3 种方法来对值进行比较: 严格相等运算符 === 宽松相等运算符

  • javascript遍历对象的五种方式实例代码

    目录 准备 五种武器 for-in Object.keys Object.getOwnPropertyNames Object.getOwnPropertySymbols Reflect.ownKeys 总结 扩展 Object.values Object.entries hasOwnProperty propertyIsEnumerable 总结 准备 先来准备一个测试对象obj. 代码清单1 var notEnum = Symbol("继承不可枚举symbol"); var pro

  • JavaScript模拟实现封装的三种方式及写法区别

    前  言   继承是使用一个子类继承另一个父类,那么子类可以自动拥有父类中的所有属性和方法,这个过程叫做继承!  JS中有很多实现继承的方法,今天我给大家介绍其中的三种吧. 1.在 Object类上增加一个扩展方法 //声明一个父类 function Person(name){ this.name=name; this.age=age; this.say=function(){ alert("我叫"+this.name); } } //声明一个子类 function Student()

  • JavaScript中实现new的两种方式引发的探究

    JavaScript中实现new的两种方式引发的探究

    前言 当你 new 一个构造函数时发生了什么? "众所周知"的三步: 创建一个空对象,将它的引用赋给 this,继承函数的原型:通过 this 将属性和方法添加至这个对象:最后返回 this 指向的新对象,也就是实例. 一般来说在js中大概是这样的: function Mynew(parent,...rest){ let obj={}; obj.__proto__=parent.prototype; let res=parent.apply(obj,rest); return type

随机推荐