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中的一些注意事项 更新中
Dec 06 Javascript
js打造数组转json函数
Jan 14 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
js验证框架实现代码分享
May 18 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
Apr 11 Javascript
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
基于JavaScript实现随机点名器
Feb 25 Javascript
面试中canvas绘制图片模糊图片问题处理
Mar 13 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
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
javascript之函数直接量(function(){})()
2007/06/29 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
Django Rest framework权限的详细用法
2019/07/25 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
深入浅析python的第三方库pandas
2020/02/13 Python
python程序文件扩展名知识点详解
2020/02/27 Python
python 动态绘制爱心的示例
2020/09/27 Python
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
英国最大的百货公司:Harrods
2016/08/18 全球购物
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
波兰在线杂货店:Polski Koszyk
2019/11/02 全球购物
数控加工专业毕业生自荐信
2013/09/27 职场文书
司仪主持词两篇
2014/03/22 职场文书
水电工程师岗位职责
2015/02/13 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
自主招生自荐信怎么写
2015/03/24 职场文书
离婚承诺书格式范文
2015/05/04 职场文书
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技