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 相关文章推荐
jquery 分页控件实现代码
Nov 30 Javascript
javascript 解决表单仍然提交即使监听处理函数返回false
Mar 14 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
JavaScript执行顺序详细介绍
Dec 04 Javascript
JavaScript数组各种常见用法实例分析
Aug 04 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
jQuery 插件实现随机自由弹跳气泡样式
Jan 12 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
angular4实现tab栏切换的方法示例
Oct 21 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 Javascript
Python版实现微信公众号扫码登陆
May 28 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的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
javascript 弹出层组件(升级版)
2011/05/12 Javascript
js创建元素(节点)示例
2014/01/02 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
javascript中Number的方法小结
2016/11/21 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
vue+Java后端进行调试时解决跨域问题的方式
2017/10/19 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
2020/06/04 Javascript
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
Python2中的raw_input() 与 input()
2015/06/12 Python
Python监控主机是否存活并以邮件报警
2015/09/22 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
python实现简单图片物体标注工具
2019/03/18 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
python单例设计模式实现解析
2020/01/07 Python
python如何使用代码运行助手
2020/07/03 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
建筑施工员岗位职责
2013/11/26 职场文书
服务之星获奖感言
2014/01/21 职场文书
合伙协议书范本
2014/04/21 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
单位工资证明范本
2015/06/12 职场文书
小组组名及励志口号
2015/12/24 职场文书
vue3如何优雅的实现移动端登录注册模块
2021/03/29 Vue.js
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python
Redis特殊数据类型Geospatial地理空间
2022/06/01 Redis