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 相关文章推荐
仅img元素创建后不添加到文档中会执行onload事件的解决方法
Jul 31 Javascript
jQuery EasyUI API 中文文档 搜索框
Sep 29 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 Javascript
详解通过JSON数据使用VUE.JS
May 26 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
Apr 19 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 Javascript
Moment.js实现多个同时倒计时
Aug 26 Javascript
JS立即执行的匿名函数用法分析
Nov 04 Javascript
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
星际争霸中的热键
2020/03/04 星际争霸
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
培养自己的php编码规范
2015/09/28 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
理解AngularJs指令
2015/12/10 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
2019/11/08 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
Python map和reduce函数用法示例
2015/02/26 Python
Python微信库:itchat的用法详解
2017/08/14 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
解决Jupyter Notebook开始菜单栏Anaconda下消失的问题
2020/04/13 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
通信工程专业女生个人求职信
2013/09/21 职场文书
《陋室铭》教学反思
2014/02/26 职场文书
元旦文艺汇演主持词
2014/03/26 职场文书
中华美德颂演讲稿
2014/05/20 职场文书
开工典礼策划方案
2014/05/23 职场文书
个人合伙协议书范本
2014/10/14 职场文书
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers