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 相关文章推荐
XML的代替者----JSON
Jul 21 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
判断一个对象是否为jquery对象的方法
Mar 12 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
jquery ztree实现模糊搜索功能
Feb 25 Javascript
JS多物体实现缓冲运动效果示例
Dec 20 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
js实现简单分页导航栏效果
Jun 28 Javascript
Element Popover 弹出框的使用示例
Jul 26 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多例模式介绍
2013/06/24 PHP
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
Yii框架获取当前controlle和action对应id的方法
2014/12/03 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
PHP页面跳转操作实例分析(header方法)
2016/09/28 PHP
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
10个JavaScript中易犯小错误
2016/02/14 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
2016/03/11 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
jquery学习笔记之无new构建详解
2017/12/07 jQuery
vue小白入门教程
2018/04/02 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
python使用matplotlib绘制折线图教程
2017/02/08 Python
python实现二分查找算法
2017/09/21 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
python双端队列原理、实现与使用方法分析
2019/11/27 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
Windows环境下Python3.6.8 importError: DLLload failed:找不到指定的模块
2020/11/01 Python
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
企业形象策划方案
2014/05/29 职场文书
故宫英文导游词
2015/01/31 职场文书
2015年大学迎新工作总结
2015/07/16 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
python opencv通过4坐标剪裁图片
2021/06/05 Python