脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js对象和原型

JavaScript中的对象和原型(一)

 更新时间：2016年08月12日 15:42:09   作者：念在三角湖畔  
大家都知道在js中没有类的概念，因此它的对象也与基于类的语言中的对象有所不同。所以大家要了解面向对象，首先要了解js中的对象和原型，下面本文给大家介绍JavaScript中的对象和原型(一)知识，一起看下吧

面向对象的语言（如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实现放鞭炮动画效果

    谈及过年，最先让人想到的就是，噼里啪啦的鞭炮声。本文将利用JavaScript实现一个简单的放鞭炮动画效果，感兴趣的小伙伴可以了解一下
    2023-01-01
  • js控制的遮罩层实例介绍

    js控制的遮罩层实例介绍

    把项目里很土的弹窗，改成了遮罩层显示，现在感觉好多了。在这里创建一个div和body一样大小，这样就可以把整个页面全部盖住了，具体实现祥看本文，希望可以帮助到你
    2013-05-05
  • JavaScript作用域与作用域链优化方式

    JavaScript作用域与作用域链优化方式

    这篇文章主要介绍了JavaScript作用域与作用域链优化方式,围绕主题展开JavaScript作用域以及作用域链的那些事情，以及针对它们的一些我们在代码中优化小技巧，需要的朋友可以参考一下
    2022-07-07
  • 魔鬼字典 JavaScript 笔记 代码比较多乱

    魔鬼字典 JavaScript 笔记 代码比较多乱

    魔鬼字典 JavaScript 笔记 代码比较多乱，对于有经验的看容易点。
    2010-03-03
  • js实现在字符串中提取数字

    js实现在字符串中提取数字

    js实现在字符串中提取数字。需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11
  • JS Canvas接口和动画效果大全

    JS Canvas接口和动画效果大全

    这篇文章主要介绍了JS Canvas接口和动画效果大全，对Canvas感兴趣的同学，可以参考下
    2021-04-04
  • js中switch case循环实例代码

    js中switch case循环实例代码

    这篇文章主要介绍了js中switch case循环实例代码，有需要的朋友可以参考一下
    2013-12-12
  • JavaScript编码小技巧分享

    JavaScript编码小技巧分享

    这篇文章适合任何一位基于JavaScript开发的开发者。我写这篇文章主要涉及JavaScript中一些简写的代码，帮助大家更好理解一些JavaScript的基础。希望这些代码能从不同的角度帮助你更好的理解JavaScript。
    2020-09-09
  • JavaScript中undefined、null与NaN的区别

    JavaScript中undefined、null与NaN的区别

    undefined、null和NaN都属于javascript中的数据类型,本文主要介绍了 JavaScript中undefined、null与NaN的区别,具有一定的参考价值,感兴趣的可以了解一下
    2023-09-09
  • JavaScript中的Proxy对象

    JavaScript中的Proxy对象

    这篇文章主要介绍了JavaScript中的Proxy对象的相关资料，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下
    2020-11-11

最新评论