JavaScript中的对象和原型(一)


Posted in Javascript onAugust 12, 2016

面向对象的语言(如Java)中有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象。但是,JavaScript 没有类的概念,因此它的对象也与基于类的语言中的对象有所不同。

要了解面向对象,首先就要了解Javascript中的对象和原型。这篇文章中主要学习一下Javascript中的对象。

  一 关于对象

对象其实就是一种引用类型。而对象的值就是引用类型的实例。在JavaScript 中引用类型是一种数据结构,将数据和功能组织在一起。它也常被称做为类,但JavaScript 中却没有类的概念。虽然JavaScript 是一门面向对象的语言,却不具备传统面向对象语言所支持的类和接口等基本结构。

二 对象的创建以及常用操作

1.使用new运算符

<script>
var user = new Object(); //使用new运算符创建一个对象
user.name = '念在三角湖畔'; //给对象添加属性
user.age = 22;
user.address = '湖北武汉';
alert(user.name + " " +user.age);//返回 '念在三角湖畔 湖北武汉'
</script>

说明:上面的方式中new关键字可以省略,即var user = new Object();等价于 var user = Object();

2.JSON法创建

关于JSON的一些知识可以百度上搜索下。

简单的JSON对象: {name:'念在三角湖畔',age:22,address:'湖北武汉'}

//使用JSON法创建
/*
简单的JSON对象:{name:'念在三角湖畔',age:22,address:'湖北武汉'}
*/
var user = {
name:'念在三角湖畔',
age:22,
address:'湖北武汉' 
};
alert(user.name + " " +user.age);//返回 '念在三角湖畔 湖北武汉'

3.传统赋值方式

//传统赋值
var user = {};
user.name = '念在三角湖畔'; //给对象添加属性
user.age = 22;
user.address = '湖北武汉';
alert(user.name + " " +user.age);//返回 '念在三角湖畔 湖北武汉'

  4.属性的调用

对于对象属性的调用有两种方式:

拿上面的例子来说,上面我们已经用了其中一种方式,也就是'.'运算符,调用方法如下:

alert(user.name + " " +user.age);//返回 '念在三角湖畔 湖北武汉'

另一种方法:

alert(user['name'] + " " +user['age']);//返回 '念在三角湖畔 湖北武汉

5.给对象添加方法

给对象添加方法和给变量添加一个属性其实大同小异。具体代码如下:

var user = {
name:'念在三角湖畔', //给对象添加属性
age:22,
address:'湖北武汉',
showInfo:function(){//添加一个方法
alert(this.name+" "+this.age+" "+this.address);//返回 '念在三角湖畔 22 湖北武汉' 
},
showHello:showHello//将对象外部的方法添加到对象
};
function showHello(){
alert("Hello!"); 
}
user.showInfo();//调用方法
user.showHello();

6.删除对象的属性

删除对象的属性用delete操作符。格式:delete 对象名称.属性名称

var user = {
name:'念在三角湖畔', //给对象添加属性
age:22,
address:'湖北武汉'
};
alert(user.name);//返回‘念在三角湖畔'
delete user.name;//删除user的name属性
alert(user.name);//返回‘undefined'

三 总结

这里比较浅显的讲述了一下Javascript中对象的创建和对象方法的添加以及对象属性的删除。对象在javascript面向对象中是一个比较重要的,也算是一个比较基础的部分,只有弄清楚了对象的一些常用操作才能够进行面向对象开发。

以上所述是小编给大家介绍的JavaScript中的对象和原型(一),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript读取RSS数据
Jan 20 Javascript
判断控件是否已加载完成的代码
Feb 24 Javascript
js控制table合并具体实现
Feb 20 Javascript
javascript跨浏览器的属性判断方法
Mar 16 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
vue2滚动条加载更多数据实现代码
Jan 10 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
socket.io学习教程之基本应用(二)
Apr 29 Javascript
vue引入js数字小键盘的实现代码
May 14 Javascript
Vue项目history模式下微信分享爬坑总结
Mar 29 Javascript
JavaScript中对象的不同创建方法
Aug 12 #Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 #Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 #Javascript
JS中script标签defer和async属性的区别详解
Aug 12 #Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 #Javascript
很实用的js选项卡切换效果
Aug 12 #Javascript
js实现浏览器倒计时跳转页面效果
Aug 12 #Javascript
You might like
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
PHP实现的MD5结合RSA签名算法实例
2017/10/07 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
2016/01/31 Javascript
jQuery ready()和onload的加载耗时分析
2016/09/08 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
jQuery实现基本动画效果的方法详解
2018/09/06 jQuery
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
[02:44]2014DOTA2 国际邀请赛中国区预选赛 大神红毯秀
2014/05/25 DOTA
Python内置的字符串处理函数详细整理(覆盖日常所用)
2014/08/19 Python
python字典多键值及重复键值的使用方法(详解)
2016/10/31 Python
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
Python编程实现使用线性回归预测数据
2017/12/07 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
毕业生幼师求职自荐信
2013/10/01 职场文书
优秀医生事迹材料
2014/02/12 职场文书
售后服务经理岗位职责范本
2014/02/22 职场文书
美容院经理岗位职责
2014/04/03 职场文书
先进工作者申报材料
2014/12/23 职场文书
Python标准库之typing的用法(类型标注)
2021/06/02 Python
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers