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 相关文章推荐
html读出文本文件内容
Jan 22 Javascript
JQuery UI皮肤定制
Jul 27 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
javascript中clipboardData对象用法详解
May 13 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
Vue之Watcher源码解析(1)
Jul 19 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 Javascript
利用vue3+ts实现管理后台(增删改查)
Oct 30 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
上海无线电三厂简史修改版
2021/03/01 无线电
php 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
2012/02/03 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
详解tween.js 中文使用指南
2018/01/05 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
jQuery实现简易聊天框
2020/02/08 jQuery
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
vue+vant 上传图片需要注意的地方
2021/01/03 Vue.js
SQLite3中文编码 Python的实现
2017/01/11 Python
基于python的字节编译详解
2017/09/20 Python
对django2.0 关联表的必填on_delete参数的含义解析
2019/08/09 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
Python如何计算语句执行时间
2019/11/22 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
Python Unittest原理及基本使用方法
2020/11/06 Python
Django自带的用户验证系统实现
2020/12/18 Python
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
毕业生自荐书
2014/02/02 职场文书
会计专业大学生职业生涯规划书
2014/02/11 职场文书
动员大会主持词
2014/03/20 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
党员教师个人对照检查材料(群众路线)
2014/09/26 职场文书
丧事答谢词
2015/01/05 职场文书