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 相关文章推荐
推荐一些非常不错的javascript学习资源站点
Aug 29 Javascript
javascript中创建对象的三种常用方法
Dec 30 Javascript
JavaScript实现动态创建CSS样式规则方案
Sep 06 Javascript
三分钟带你玩转jQuery.noConflict()
Feb 15 Javascript
在vue中获取dom元素内容的方法
Jul 10 Javascript
原生js实现简单的焦点图效果实例
Dec 14 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 Javascript
微信小程序用户盒子、宫格列表的实现
Jul 01 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 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
萌王史莱姆”萌王性别尴尬!那“萌战”归女组还是男?
2018/12/17 日漫
PHP 数据库树的遍历方法
2009/02/06 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
百度搜索框智能提示案例jsonp
2016/11/28 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
2017/02/04 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
python3 求约数的实例
2019/12/05 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
财务经理的岗位职责
2013/12/17 职场文书
教师师德反思材料
2014/02/15 职场文书
物业管理毕业生的自我评价
2014/02/17 职场文书
党员公开承诺践诺书
2014/03/25 职场文书
学生会部长竞聘书
2014/03/31 职场文书
新年团拜会主持词
2014/04/02 职场文书
三严三实心得体会范文
2014/10/13 职场文书
关于运动会的广播稿50字
2014/10/17 职场文书
报名委托书
2015/01/29 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers
详解flex:1什么意思
2022/07/23 HTML / CSS