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 相关文章推荐
仿百度的关键词匹配搜索示例
Sep 25 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
javascript 寻找错误方法整理
Jun 15 Javascript
jQuery晃动层特效实现方法
Mar 09 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
Mar 01 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
关于vue面试题汇总
Mar 20 Javascript
js统计页面上每个标签的数量实例代码
May 29 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 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
表单复选框向PHP传输数据的代码
2007/11/13 PHP
PHP 万年历实现代码
2012/10/18 PHP
php中stdClass的用法分析
2015/02/27 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
详解PHP中foreach的用法和实例
2016/10/25 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
Python实现购物车功能的方法分析
2017/11/10 Python
python读取和保存图片5种方法对比
2018/09/12 Python
Python列表(List)知识点总结
2019/02/18 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
python简单实现9宫格图片实例
2020/09/03 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
九年级英语教学反思
2014/01/31 职场文书
优秀志愿者事迹材料
2014/02/03 职场文书
歌唱比赛主持词
2014/03/18 职场文书
好人好事演讲稿
2014/09/01 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
导游词之青岛太清宫
2019/12/13 职场文书
golang slice元素去重操作
2021/04/30 Golang
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
git中cherry-pick命令的使用教程
2022/06/25 Servers