JavaScript - 函数相关知识点
2017-02-28 本文已影响29人
西巴撸
函数内部的隐藏参数 --> arguments ( 重点 )
arguments:接收实参
- 该参数是一个类似于数组的结构（可以像数组一样遍历 + 还可以使用下标来访问数据），但是并不是数组。
- 函数调用的时候，会把实参的值赋值给形参，而且会使用arguments来接收实参
- 如果实参的个数超过形参的个数，那么可以通过arguments来获取超出的数据
- 如果实参的格式小于形参的个数，那么不足的全部设置为undefined
this指向的是一个对象，具体指向的是哪个对象由函数调用方式来决定。总之,this是面向对象里面最让人蛋疼的一个东西
- 使用this会让我们的代码灵活
- 函数以普通方式调用：this指向window(注释：在非严格模式下指向window) 严格模式是 :
use static - 以对象的方法来调用：this指向调用方法的对象
- 以构造函数的方式来调用 ：this指向的是构造函数内部新创建的对象
- 上下文的方式调用（call|apply）: 第一个参数
length属性
1.arguments.length 实参长度（个数）
2.函数名.length 形参的长度（个数）
- 示例代码1 :
<script>
//1 扩展内置对象
Array.prototype.des = "描述信息";
var arr1 = new Array();
console.log(arr1.des);
//2 怎么判断一个对象的类型
//typeof
// 字符串|数字基本数据类型 string /number /boolean
//函数 function
//数组 | 日期类型 --->object
//判断数组：Array.isArray()
//3 toString判断
function sum()
{
var result = 0;
for (var i = 0; i < arguments.length; i++) {
result += arguments[i];
}
console.log(arguments.des,"______________");
console.log(Array.isArray(arguments)); //false
console.log(result);
//数组 [object Array]?
console.log(Object.prototype.toString.call(arguments));
//不是数组 [object Arguments]
}
sum(1,2,3,4,5); // 3
</script>
- 示例代码2 :
<script>
function demo(a,b,c){
// 打印用户传入的参数的个数
console.log(arguments.length);
//abc ===> 123
//4和5可以拿到
console.log(arguments[demo.length],"+++");
console.log(c);
//a =1 b = 2 c = undefined
}
demo(1,2,3,4,5);
console.log(demo.length);
demo(1,2);
</script>
- 示例代码3 :
<script>
//"use strict";
var obj = {name:"电话情缘1"};
var obj2 = {name:"电话情缘2"};
function showName(){
console.log(this);
};
// obj.showName = showName;
// obj2.showName = showName;
// obj.showName();
showName();
</script>
callee和caller
callee : 函数自身
- 主要用途：递归
- 递归的特点：
- 自己调用自己
- 要有退出条件 不然就会陷入死循环
caller : 调用函数的函数 注意点：在全局作用域中调用，指向的是null
- 示例代码1 :
<script>
function demo1(){
console.log(demo1.caller); //demo2这个函数
}
function demo2(){
demo1();
}
demo2();
demo1();
</script>
- 示例代码2 :
<script>
function func(){
console.log(arguments.callee); //函数自身
}
func();
</script>
- 示例代码 :
<script>
//1 - 2: 1+2
//1 - 3: 1+2+3
//1 - 4: 1+2+3+4
//1 - 5: 1+2+3+4+5
//1 - 6: 1+2+3+4+5+6
//1 - n: 1+2+3+4.....n ==>1~(n-1) + n
console.log((function (n) {
if (n == 1) {
return 1;
}
//如果函数的匿名函数，那么要在函数内部调用自身，可以使用arguments.callee
return arguments.callee(n - 1) + n;
})(100));
//console.log(demo(3000)); //1+2+3
</script>
Function的小应用
数组去重
- 示例代码 :
<script>
// 使用反括号`` 其实这里是走个铺垫 为之后的node.js
var func = new Function(`
var arr = [];
for (var i = 0; i < arguments.length; i++) {
//去arr数组中查找指定的元素是否存在，如果不存在那么就添加
if (arr.indexOf(arguments[i]) == -1)
{
arr.push(arguments[i])
}
}
return arr;
`)
console.log(func(1, 2, 3, 4, 5, , 4, 7, 8, 2, 8, 9));
</script>
求最大值
- 示例代码 :
<script>
function getMax(){
var maxNum = arguments[0];
//遍历arguments
for (var i = 0; i < arguments.length; i++) {
if (maxNum < arguments[i])
{
maxNum = arguments[i];
}
}
return maxNum;
}
console.log(getMax(1, 20, 30, 21,220,44,55,123));
</script>
eval 函数
作用：把字符串转换为js的代码
new Function("字符串");// 把字符串转换为js的代码
区别：
- Function：当函数调用的时候才会执行
- eval：立刻执行
使用建议：不推荐使用（js是词法作用域，eval和with可以动态的调整破坏js的词法作用域），性能不好。
- 场景：页面中接收用户的js代码 + json处理
Json和XML
- ** json是一种国际标准协议,只要我们将数据转换成这个格式,就能实现传输**
- XML比json更国际化标准,在所有语言中通用
- 从整个互联网开发来看 XML占据80%,而json只有20%. 如果是前端开发的话,json占据55%,而XML占据45%
- HTML就是一种XML,XML不是一种语言,是一种规定,协议.
Json协议和XML协议区别
-
相同点
1.都是一种通信协议
2.都可以用来描述数据 -
不同点
1.json:一种轻量级的数据结构，用来表示、存储、传输数据.
2.XML专用带宽大,json占用带宽小
3.json没有XML这么通用
4.json可以和js对象互相转换,和js是天生的一对,因此广泛用于前端开发
5.XML已经被业界广泛的使用,而json才刚刚开始,但是在Ajax这个特定的领域.未来的发展一定是XML让位给json -
示例代码 :
<script>
//把JSON数据转换为对象
var obj = JSON.parse("{\"name\":\"默默的备胎\"}");
console.log(obj);
//把对象转换为json数据
var str = JSON.stringify(obj);
console.log(str);
</script>
<script>
var jsonStr = "{\"name\":\"默默的备胎\"}";
//json--->对象
eval("var o =" +jsonStr);
console.log(o);
var obj = eval("(" + jsonStr +")");
console.log(obj);
</script>
Function.prototype的原型链
- Function是Object构造函数的实例对象
- Object可以看作是Function的实例对象
- 示例代码 :
<script>
function Person(){}
function Boy(){}
//设置继承
var p1 = new Person();
Boy.prototype = p1;
var boy = new Boy();
//console.log(Function.prototype); //function () {}
console.log(Boy.__proto__ == Function.prototype);
console.log(Boy.__proto__.constructor); //function Function() { [native code] }
console.log(Boy.__proto__.__proto__ == Object.prototype); //
console.log(Function.constructor == Function);
console.log(Function.__proto__ == Function.prototype);
</script>
<script>
console.log(Object.constructor);
console.log(Object.__proto__);
console.log(Object.__proto__ == Function.__proto__);
</script>
-
解释
1.Boy构造函数本身是一个对象，因此有构造函数，它的构造函数是Function,它的原型对象是Boy.proto == Function.prototype 空函数
2.Function的原型对象是一个空的函数
3.这个空的函数也是一个对象，因此也有构造函数，它的构造函数是Function
4.推论：Function的原型对象是空函数，因此空函数的原型对象应该是自己（错误）是空的对象
5.空函数的原型对象 == Object.prototype
6.Function也是一个对象，因此也有构造函数，它的构造函数是谁？是自己Function
7.Function作为一个对象来说，也有自己的原型对象Function.proto
8.Function对象的原型对象和其构造函数的原型对象是空函数
9.Object.prototype的构造函数是Object
10.Object本身也是一个对象，因此也有自己的构造函数--->Function -
图解 --> 可以慢慢理解 这种东西急不得
**Function的原型链**
with的使用
- 作用：把对象的作用域引申到{}中,达到缩减代码的目的
- 应用场合：在写代码的时候，要写很长的前缀.对象.属性.属性.属性
-
具体的使用注意：
1.在{}中不能使用无前缀的方式来增加属性
2.this应该是谁？ window
3.严格模式下，with被禁止使用了 - 使用建议：不建议使用 ,因为内部的this指向会有问题
私有变量和私有函数
- 在构造函数内部声明的变量称之为私有变量
- 示例代码 :
<script>
function Person(){
this.name = "momo";
this.showName = function(){};
var a = "测试的值";
function getA(){
return a;
};
//像test这样的实例方法，它可以访问构造函数内部的变量和函数，这种方法被称为特权方法
this.test = function(){
console.log(getA());
};
}
var p1 = new Person();
p1.test();
</script>
