JavaScript对象学习小结


Posted in Javascript onSeptember 02, 2015

JavaScript 对象

JavaScript 提供多个内建对象,比如 String、Date、Array 等等。

对象只是带有属性和方法的特殊数据类型。

在JavaScript中,几乎用到的每个js都离不开它的对象。下面我们深入了解一下js对象。

js中对象的分类跟之前我们学过的语言中函数的分类一样,一个是系统自带的叫预定义对象,一个是用户自己写的叫自定义对象。

大体内容如下图所示:

JavaScript对象学习小结

 一:核心对象

1.Array对象

数组对象,用来创建数组,使用new 创建

常用的方法如下图:

JavaScript对象学习小结

常用属性:

JavaScript对象学习小结

通过例子说明Array对象的创建和使用,如下。

<script language="javascript"> 
  var data=new Array("1","2","3");//创建数组data 
  document.writeln("data的初始内容为:"+data+","); //输出数组内容 
  function fun(){  //自定义函数fun()显示数组长度 
    if(this.length!=0){ 
      document.writeln("<PRE>此数组的长度为:"+this.length+"</PRE>"); 
    }else{ 
      document.writeln("<PRE>此数组的长度为0</PRE>"); 
    } 
  } 
  Array.prototype.fun=fun; //为Array对象添加fun()方法 
  data.fun();        //调用fun()方法 
  data=new Array();//清空data数组内容 
  data.fun();//显示清空后数组的长度 
</script>

运行结果:

JavaScript对象学习小结

说明:

prototype用于添加新的属性和方法,用法为:Array.prototype.functionName=functionName

2,Function对象

Function对象可以在程序执行的过程中动态生成函数并调用函数。

常用属性如下:

JavaScript对象学习小结

JavaScript对象学习小结

常用方法如下:

下面实例说明:

<script language="javascript"> 
    funSum=new Function("x","y","z=x+y;return z");   //创建函数funSum()  
 
    x=prompt("请输X值:",""); 
    y=prompt("请输Y值:",""); 
     
    x=Number(x); 
    y=Number(y); 
    alert(newfun(x,y));  //调用函数并输出 
</script> 

注意:Function对象不可写成小些的function。Function是对象,用于动态创建函数,function是关键字,通过function new出来的函数也是Function对象的实例。

3,String对象

String对象提供了对字符串进行处理的属性和方法。使用时可以直接赋值也可以通过new创建后再赋值

String对象有很多方法,主要是用户有关字符串在Web页面中的显示格式,字体大小,字体颜色,字符的搜索以及字符的大小写转换方面的功能。

JavaScript对象学习小结

    通过以上对象的prototype属性,我们也看到了JavaScript的特点,它不仅提供给我们一些功能,还提供给用户自己添加功能的方法,简直是太好了。

二:文档对象

document对象,接触JavaScript的第一个例子是通过ID名称获取控件的名称,里面就用到document,当时没有多想,就当是关键字过了。

document对象是window对象的属性,也是唯一的即属于BOM又属于DOM的对象。

说到window对象,我们首先来看一下window中各对象间的关系。如下图:

JavaScript对象学习小结

了解了大体结构关系,接下看看看document对象的常用属性:

JavaScript对象学习小结

有关document对象的方法,这里说说使用最频繁的.write()/.writeln()方法。这两个方法的作用都是打印字符,不同的是writeln打印完后多了个换行。 

下面写一个用document对象的write方法动态添加JavaScript文件的实例

<script language="javascript"> 
  document.write("<script type=\"text/javascript\" src=\"textuser.js\">"+"</scr"+"ipt>"); 
</script>

这里主要想说明</script>为什么是分开的。

我们可以先看一下分开写的网页源码:

JavaScript对象学习小结

看不出什么不同,接下来我们看一下不分开时网页源码:

JavaScript对象学习小结 

  结果很明显,如果不分开写</script> 会和前面的<script>配对,这样,浏览器会提示我们有误。

三:事件对象

event对象是一种只与事件处理过程有关的对象。

JavaScript中的事件跟vb中学过的事件一致,有鼠标事件,键盘事件,加载事件,等。。

事件的发生肯定有其出发者,触发发生后,这一事件也就随即结束。

事件在JavaScript中使用很简单,就是在关键字前加On。

以上本文给大家分享的javascript对象学习小结,欲了解更多,请持续关注本站。

Javascript 相关文章推荐
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
js中unicode转码方法详解
Oct 09 Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 Javascript
Bootstrap响应式侧边栏改进版
Sep 17 Javascript
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 Javascript
angularJS之$http:与服务器交互示例
Mar 17 Javascript
Vue.js 插件开发详解
Mar 29 Javascript
vue.js的安装方法
May 12 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 Javascript
Javascript使用integrity属性进行安全验证
Nov 07 Javascript
JS实现可点击展开与关闭的左侧广告代码
Sep 02 #Javascript
jquery实现华丽的可折角广告代码
Sep 02 #Javascript
javascript学习总结之js使用技巧
Sep 02 #Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 #Javascript
自定义刻度jQuery进度条及插件
Sep 02 #Javascript
JQuery操作textarea,input,select,checkbox方法
Sep 02 #Javascript
javascript中for/in循环及使用技巧
Sep 01 #Javascript
You might like
七款最流行的PHP本地服务器分享
2013/02/19 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
很可爱的输入框
2008/08/03 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
简介BootStrap model弹出框的使用
2016/04/27 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
JavaScript实现经典排序算法之冒泡排序
2016/12/28 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
2017/09/02 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
深入理解Node module模块
2018/03/26 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
Python闭包函数定义与用法分析
2018/07/20 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
python三引号输出方法
2019/02/27 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
传统软件工程与面向对象的软件工程有什么区别
2012/05/31 面试题
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
违反学校规定检讨书
2014/01/18 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
投资入股合作协议书
2014/10/28 职场文书
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android
vue实现列表垂直无缝滚动
2022/04/08 Vue.js