javascript中的 object 和 function小结


Posted in Javascript onAugust 14, 2016

在学习过传统的面向对象语言后,如 java c++,转学 javascript 却有点不适应,特别是 javascript 中所谓的 object(对象) function(函数),有时候会被搞晕。于是乎简单整理了下面的一些概念性的东西,方便学习和理解,会结合一点 java面向对象的知识加以说明。

先了解几个概念:

1.首先 Object 在 ECMAScripe 中是指什么,在 ECMAScripe 中有5种简单数据类型:Undefined,Null,Boolean,Number,String. 还有一种复杂数据类型,那就是Object.

2.引用类型---java中的 类 的概念

引用类型的值 --- java中对象的概念

3.函数 ---- java 中方法的概念

4.var --- 申明变量的一个操作符,因为 js 的变量是松散类型的,所谓松散就是可以用来保存任何数据,变量仅仅用来表示一个占位符而已,所以变量也不必指定 什么 String ,int ,直接var 就可以了,注意对象 可以用var 声明.

5.Object(), 是什么 --- java中 Object 的 构造方法 , js 中 Object 的 构造函数。

Object

js 是可以动态的添加属性和方法的。
比如创建一个 Object 实例

var obj = new Object();

变量 obj 就是 new Object() 的 对象。
接下来:

var obj = new Object();
obj.name = 'Zeng';
obj.age = 12;
obj.fun = function () {
  console.log(this.name+this.age);
}

但 这样封装性不太好,所以比较经常使用的是对象字面量表示法

var obj = {
  name:'Zeng',
  age:12,
  fun:function () {
    console.log(this.name+this.age);
  }
}
obj.fun(); // 打印出: Zeng12

对象属性的访问:

1,采用  中括号
console.log(obj["name"]);

2,采用  点 , 建议采用此方式
console.log(obj.name );

function

函数对于任何语言来说都是重要的一部分,函数是 js的叫法,你也可以理解为就是 java 的 方法 ,c 语言的 函数,都一样的。 不过在申明和使用上, js 的函数 可很大不同。

函数的一个示例:

function fun() {
   return "例子";
}
console.log(fun()); // 输出 : ‘例子'

还可以这样:

var fun = function() {
  return "使用表达式创建函数"
};
console.log(fun()); // 输出 : "使用表达式创建函数"

上面例子你会注意到函数没有函数名,只有一个变量名 fun ,表达式尾部还有一个 ;分号,
你可以把它当作声明一个变量的表达式就好理解了,声明其它变量是这么写的:

var name = "Zeng"; // 有变量名 ,还有 分号

来一个带参数的例子:

function fun() {
   return arguments[0] + arguments[1] + arguments[2];
}
console.log(fun("这是","一个","例子")); // 输出 :“这是一个例子”

是不是有点奇怪,首先我创建的函数没有带参数的,在调用的时候有给参数,在函数里面也能获得参数并返回。

其实这里是要说明一点,js 函数不介意传递进来几个参数,也不在乎参数是什么类型!原因是函数内部接收参数是用一个数组来储存的!

数组也就是 上面的 arguments , 数组当然不介意你传几个参数进来,有参数我加一,没参数我就是 null 。

咱们可以利用这个特性做个例子:

模仿方法的重载--利用参数个数的不同执行不同反应

function fun() {
  if(arguments.length == 1){
    return arguments[0]*10;
  }
  if(arguments.length == 2){
    return (arguments[0]+arguments[1])*10;
  }
  return 10;
}
console.log(fun(11,111)); // 返回 1220 !!!!

没有重载:
上面例子是模仿函数的重载,为什么要模仿呢,我自己创建几个不同参数的函数不久可以了。

function fun( num1) {
  return "只有一个参数的函数"
}
function fun( num1,num2) {

  return "有两个参数的函数";
}
console.log(fun(11)); // 输出 “有两个参数的函数”

明明调用的是带一个参数的函数,执行的确是带两个参数的函数。原因:js定义了两个相同名字的函数,该名字只属于后定义的函数!!! 所以在 js 中没有重载 这一特性。

函数名是指针:

var fun = function(num1,num2) {
  return num1+num2;
};

var new_fun = fun;
fun = null; // 将 函数 置 null

console.log(new_fun(10,20)); //输出 :30
console.log(fun(10,20)); //抛出异常 :fun is not a function

可看出尽管 fun = null; 但在此之前 var new_fun = fun; 也就是 指针也指向了 new_fun 了,所以 new_fun () 函数还能执行,并且函数体没有置 null

函数也可以作为值来使用:

function add(fun,num) {
  return fun(num);
}
function add_10(num) {
  return num+10;
}

console.log(add(add_10,200)); // 输出 : 210

可以这么解释:

function add( 函数  ,  参数  ) {

  return  函数 (  传递过来的参数 );
}

函数的 arguments.callee
这是一个递归的示例

function fun(num) {
  if(num<=1){
    console.log(num );
    return 1 ;
  }else {
    console.log(num );
    return num * arguments.callee(num-1);
  }
}
console.log(fun(3)); // 输出 6
Javascript 相关文章推荐
jquery.validate使用攻略 第一部
Jul 01 Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
jQuery EasyUI API 中文文档 - Form表单
Oct 06 Javascript
js内存泄露的几种情况详细探讨
May 31 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
JavaScript兼容浏览器FF/IE技巧
Aug 14 #Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 #Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 #Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 #Javascript
漂亮! js实现颜色渐变效果
Aug 12 #Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 #Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 #Javascript
You might like
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
php文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
php支付宝在线支付接口开发教程
2016/09/19 PHP
PHP的反射机制实例详解
2017/03/29 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
jquery each的几种常用的使用方法示例
2014/01/21 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
2019/01/19 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
2019/05/06 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
python操作excel文件并输出txt文件的实例
2018/07/10 Python
Python理解递归的方法总结
2019/01/28 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
在django模板中实现超链接配置
2019/08/21 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
Python模块相关知识点小结
2020/03/09 Python
2014年健康教育实施方案
2014/02/17 职场文书
分居协议书范本
2014/11/03 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
2016年度创先争优活动总结
2016/04/05 职场文书