javascript中常用的对象创建方式有哪些？

javascript中5种常用对象创建方式

文章目录

一、直接创建方式

二、对象初始化器方式

三、构造函数方法

四、prototype原型方式

五、混合的构造函数/原型方式

一、直接创建方式

1、创建语法

var 对象变量名 = new Object();

对象变量名. property1 = value1;

…;

对象变量名. propertyN = valueN;

对象变量名. methodName1 = function([参数列表]){

//函数体

}

…;

对象变量名. methodNameN = function([参数列表]){

//函数体

}

2、基础示例

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script>var student = new Object();//直接创建对象student.name="Tom";//定义变量student.doHomework=function(){//定义方法console.log(this.name+name+"@@@@@@@@@@@");}console.log(student.name);//输出学生姓名student.doHomework();//调用方法</script></head><body></body>
</html>

3、运行结果

二、对象初始化器方式

1、创建语法

var 对象变量名 = {

property1 : value1,

property2 : value2,

…,

propertyN : valueN,

methodName1 : function([parameter_list]){

//函数体

…,

methodNameN : function([parameter_list]){

//函数体

}

2、基础示例

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script>//对象初始化器方式var object={url:"",success:function(data){console.log(data+"自主学习");}};object.success("Tom")//调用方法，并传参</script></head><body></body>
</html>

3、运行结果

三、构造函数方法

1、创建语法

function 构造函数([参数列表]){

this.属性 = 属性值;

…

this.属性N = 属性值N;

this.函数1 = function([参数列表]){

//函数体

} ;

…

this.函数N = function([参数列表]){

//函数体

} ;

}

2、基础示例

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script><!--构造函数方式便于动态为属性赋值，但是这种方式将方法也定义在了构造方法体中，使得代码比较杂乱-->function Student(score){this.name="Tom";this.score=score;this.doHomework=function(){console.log(this.name+"正在做作业");}}var student=new Student(88);console.log(student.score)//调用属性并输出student.doHomework();//调用方法</script></head><body></body>
</html>

3、运行结果

四、prototype原型方式

1、创建语法

function 对象构造器( ){

}

对象构造器.prototype.属性名=属性值;

对象构造器.prototype.函数名 = function([参数列表]){

//函数体

}

2、基础示例

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script><!--prototype原型方式实现了方法与属性的分离,使代码不混乱,但不能动态的给属性赋值-->function Student(){}Student.prototype.name="Tom";Student.prototype.doHomework=function(){console.log("正在做作业")}var student = new Student();student.doHomework();</script></head><body></body>
</html>

3、运行结果

五、混合的构造函数/原型方式

1、创建语法

function 对象构造器([参数列表]){

}

对象构造器.prototype.函数名 = function([参数列表]){

//函数体

}

2、基础示例

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script><!--混合的构造函数/原型方式实现了方法与属性的分离,使代码不混乱,且能动态的给属性赋值-->function Student(name){this.name=name;//动态的给name赋值}Student.prototype.doHomework=function(){console.log(this.name+"正在做作业")}var student = new Student("Tom");student.doHomework();</script></head><body></body>
</html>

3、运行结果

javascript中常用的对象创建方式有哪些？相关推荐

JavaScript中的面向对象--对象创建
JavaScript高级程序设计第3版总结p156 1.JavaScript中的对象首先,ECMAScript 中函数实际上是对象.每个函数都是 Function 类型的实例,而且都与其他引用类型一 ...
javascript一种新的对象创建方式-Object.create()
1.Object.create() 是什么? Object.create(proto [, propertiesObject ]) 是E5中提出的一种新的对象创建方式,第一个参数是要继承的原型,如果不 ...
JavaScript新的对象创建方式---Object.create()
Object.create(proto [, propertiesObject ]) 是E5中提出的一种新的对象创建方式, 第一个参数是要继承的原型,如果不是一个子函数,可以传一个null, 第二个参 ...
JavaScript中的几种继承方式及优缺点,你知道多少呢？
原文连接:JavaScript中的几种继承方式及优缺点,你知道多少呢? 继承也是前端里面的重要的一个知识点,在实际工作中或者面试中也会经常的遇到,那么通过这篇文章我们详细的了解一下继承的几种方式以及各 ...
【从0到1学Web前端】javascript中的ajax对象（一）
[从0到1学Web前端]javascript中的ajax对象(一) 如今最流行的获取后端的(浏览器从server)数据的方式就是通过Ajax了吧.今天就来具体的来学习下这个知识吧.假设使用ajax来訪 ...
JavaScript id_好程序员web前端分享Javascript中函数作为对象
好程序员web前端分享Javascript中函数作为对象,Javascript赋予了函数非常多的特性,其中最重要的特性之一就是将函数作为第一型的对象.那就意味着在javascript中函数可以有属性, ...
选择嵌套_如何优雅地在JavaScript中访问嵌套对象
在JavaScript中访问嵌套对象以超酷的方式安全地访问JavaScript中的嵌套对象 JavaScript是惊人的,我们都知道.但是JavaScript中的一些东西真的很奇怪,它们让我们大开眼 ...
广州蓝景分享—前端开发JavaScript中的Array对象与其他数组
各位小伙伴好,今天我们广州蓝景与大家分享一些前端技术知识. JavaScript中的Array对象与其他编程语言中的数组一样,可以将多个项目的集合存储在单个变量名下,并具有用于执行常见数组操作的成员. ...
第163天：js面向对象-对象创建方式总结
面向对象-对象创建方式总结 1. 创建对象的方式,json方式推荐使用的场合: 作为函数的参数,临时只用一次的场景.比如设置函数原型对象. 1 var obj = {}; 2 //对象有自己的属性 ...
php节点对象,JavaScript_JavaScript中访问节点对象的方法有哪些如何使用，JavaScript中访问节点对象的方法 - phpStudy...
JavaScript中访问节点对象的方法有哪些如何使用 JavaScript中访问节点对象的方法有哪些? var obj = document.getElementById('fdafda'); va ...

javascript中常用的对象创建方式有哪些？

javascript中5种常用对象创建方式

javascript中常用的对象创建方式有哪些？相关推荐

最新文章

热门文章