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 相关文章推荐
判断iframe是否加载完成的完美方法
Jan 07 Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
Mar 23 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
jquery ztree实现下拉树形框使用到了json数据
May 14 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
javascript自定义in_array()函数实现方法
Aug 03 Javascript
基于jQuery实现淡入淡出效果轮播图
Jul 31 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
Vue 事件处理操作实例详解
Mar 05 Javascript
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
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
海贼王:最美的悬赏令!
2020/03/02 日漫
PHP遍历二维数组的代码
2011/04/22 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
一个高效的JavaScript压缩工具下载集合
2007/03/06 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
JS获取时间的方法
2015/01/21 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
Python读写Redis数据库操作示例
2014/03/18 Python
python中将字典转换成其json字符串
2014/07/16 Python
python实现下载指定网址所有图片的方法
2015/08/08 Python
Python 登录网站详解及实例
2017/04/11 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
python根据url地址下载小文件的实例
2018/12/18 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
python 异步async库的使用说明
2020/05/04 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
2014国培学习感言
2014/03/05 职场文书
九年级化学教学反思
2016/02/22 职场文书
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫