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 性能优化手册 推荐
Feb 23 Javascript
浅析JavaScript中的隐式类型转换
Dec 05 Javascript
js代码验证手机号码和电话号码是否合法
Jul 30 Javascript
JQuery导航菜单选择特效
Apr 11 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 Javascript
简单理解vue中Props属性
Oct 27 Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 Javascript
使用 Node.js 对文本内容分词和关键词抽取
May 27 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
js实现轮播图的完整代码
Oct 26 Javascript
微信小程序如何实现全局重新加载
Jun 05 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的历史和优缺点
2006/10/09 PHP
ie与session丢失(新窗口cookie丢失)实测及解决方案
2013/07/15 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
常用jQuery选择器汇总
2017/02/02 Javascript
js正则表达式验证表单【完整版】
2017/03/06 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
深入分析jQuery.one() 函数
2020/06/03 jQuery
在Vue中使用antv的示例代码
2020/06/29 Javascript
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
python队列queue模块详解
2018/04/27 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
python 字典访问的三种方法小结
2019/12/05 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
C语言编程题
2015/03/09 面试题
军训学生自我鉴定
2014/02/12 职场文书
《海底世界》教学反思
2014/04/16 职场文书
干部考核评语
2014/04/29 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
道歉信范文
2015/05/12 职场文书
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript
实现GO语言对数组切片去重
2022/04/20 Golang