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 相关文章推荐
手把手教你自己写一个js表单验证框架的方法
Sep 14 Javascript
JavaScript避免代码的重复执行经验技巧分享
Apr 17 Javascript
通过url查找a元素应用案例
Apr 29 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
基于JavaScript代码实现pc与手机之间的跳转
Dec 23 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
May 05 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
开发用到的js封装方法(20种)
Oct 12 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 Javascript
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 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+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
在新窗口打开超链接的方法小结
2013/04/14 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
详解AngularJS过滤器的使用
2016/03/11 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
微信小程序radio组件使用详解
2018/01/31 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
[00:14]护身甲盾
2019/03/06 DOTA
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
python-str,list,set间的转换实例
2018/06/27 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
浅谈Python协程
2020/06/17 Python
Python持续监听文件变化代码实例
2020/07/22 Python
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
局域网标准
2016/09/10 面试题
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
艺术设计专业个人求职信
2013/09/21 职场文书
ktv收银员岗位职责
2013/12/16 职场文书
三下乡活动方案
2014/01/31 职场文书
数学检讨书1000字
2014/02/24 职场文书
党员政治学习材料
2014/05/14 职场文书
2014年入党积极分子党校培训心得体会
2014/07/08 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
2014年教师德育工作总结
2014/11/10 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书