关于js的一些关键知识点(call,apply,callee, caller,clourse,prototypeChain)

2022-03-21 03:00:28

可能不少学习javascript在使用call,apply,callee时会感到困惑，以下希望对于你有所帮助：

1、~~~call ,apply是函数(函数对象)的方法；callee是函数arguments对象的属性引用函数自身

2、~~~call,apply改变上下文对象this的指向

3、~~call apply方法让函数作为另一个对象的方法被调用

4、~~ apply方法只能接受数组作为参数

>> call

f.call(o,1,2) 等同于
o.m = f;
o.m(1,2);
例1：
function o1(value){
if(value < 100){
this.value = value;
}else{
this.value = 100;
}
}

function o2(value){
o1.call(this,value); //改变o1函数中，上下文对象this的指向
alert(this.value);
}

var o = new o2(133554) //100 改变了this的指向

例2：
function c1(){
this.m1 = function(){
alert(this.name);
}
}

function c2(){
this.name = “mike”;
}
var nc1 = new c1();
var nc2 = new c2(); //必须
nc1.m1.call(nc2); //mike 把方法m1作为对象nc2的方法来引用

>> apply
例3：
function o1(arg){
if (arguments[1] < 100) {
this.value = arguments[1] ;
}
else {
this.value = 100;
}
}

function o2(arg){
o1.apply(this, arg);
alert(this.value);
}

var o = new o2([101,60]) //60 参数只能是数组

>> callee

callee用法，常用于匿名函数中
var factorial = function(x){
if(x <= 1){
return 1;
}
return x * arguments.callee(x - 1); //回调函数自身
}
alert(factorial(5)); //120

---------------------------------------------------------------------------------

二、apply方法
apply方法的第一个参数也是要传入给当前对象的对象，即函数内部的this。后面的参数都是传递给当前对象的参数。
对于apply和call两者在作用上是相同的，但两者在参数上有区别的。对于第一个参数意义都一样，但对第二个参数：apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call将函数参数顺序传入即可（从第二个参数开始）。
如 func.call(func1,var1,var2,var3) 对应的apply写法为：func.apply(func1,[var1,var2,var3])

~~~~使用apply最大的好处，可以将当前函数的arguments对象(arguments是伪数组)作为apply的第二个参数传入。

var func=new function(){this.a="func"}
var myfunc=function(x,y){
var a="myfunc";
alert(this.a);
alert(x + y);
}

//call 与 apply调用时传入参数的差别

myfunc.call(func,"var"," fun");// "func" "var fun"
myfunc.apply(func,["var"," fun"]);// "func" "var fun"

三、caller 属性

返回一个对函数的引用，即调用了当前函数的函数体。
functionName.caller :functionName 对象是所执行函数的名称。
说明:
对于函数来说，caller 属性只有在函数执行时才有定义。如果函数是由 JScript 程序的顶层调用的，那么 caller 包含的就是 null 。如果在字符串上下文中使用 caller 属性，那么结果和 functionName.toString 一样，也就是说，显示的是函数的反编译文本。

function CallLevel(){
if (CallLevel.caller == null)
alert("CallLevel was called from the top level.");
else
alert("CallLevel was called by another function:\n"+CallLevel.caller);
}

function funCaller(){
CallLevel();
}

CallLevel();

funCaller();

四、callee属性
返回正被执行的 Function 对象
[function.]arguments.callee:可选项 function 参数是当前正在执行的 Function 对象的名称。
说明:
callee 属性的初始值就是正被执行的 Function 对象。
callee 属性是 arguments 对象的一个成员，它表示对函数对象本身的引用，这有利于匿函数的递归或者保证函数的封装性，例如下边示例的递归计算1到n的自然数之和。而该属性仅当相关函数正在执行时才可用。还有需要注意的是callee拥有length属性，这个属性有时用于验证还是比较好的。arguments.length是实参长度，arguments.callee.length是形参长度，由此可以判断调用时形参长度是否和实参长度一致。

//callee可以打印其本身
function calleeDemo() {
alert(arguments.callee);
}
calleeDemo();

//用于验证参数
function calleeLengthDemo(arg1, arg2) {
if (arguments.length==arguments.callee.length) {
window.alert("验证形参和实参长度正确！");
return;
} else {
alert("实参长度：" +arguments.length +" ,形参长度： " +arguments.callee.length);
}
}

//递归计算
var sum = function(n){
if (n <= 0)
return 1;
else
return n ＋arguments.callee(n - 1)
}

五、bind

var first_object = {
num: 42
};
var second_object = {
num: 24
};
function multiply(mult) {
return this.num * mult; //全局作用域下定义的 this指向window
}
//把函数对象绑定到指定对象，作为该对象的方法，并返回该对象的方法
Function.prototype.bind = function(obj) {
var method = this,
temp = function() {
return method.apply(obj, arguments);
};
return temp;
}
var first_multiply = multiply.bind(first_object); //绑定上下文对象并返回包装原函数的匿名函数
first_multiply(5); // returns 42 * 5
var second_multiply = multiply.bind(second_object);
second_multiply(5); // returns 24 * 5

六、JS闭包(Closure)
所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。

~~~~ good explaintion
关于闭包，最简单的描述就是 ECMAScript 允许使用内部函数－－即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。也就是说，内部函数会在外部函数返回后被执行。而当这个内部函数执行时，它仍然必需访问其外部函数的局部变量、参数以及其他内部函数。这些局部变量、参数和函数声明（最初时）的值是外部函数返回时的值，但也会受到内部函数的影响。

简而言之，闭包的作用就是在父函数执行完并返回后，闭包使得Javascript的垃圾回收机制GC不会收回父函数所占用的资源，因为父函数的内部函数的执行需要依赖它里面的变量。

闭包的两个特点：

1、作为一个函数变量的一个引用 - 当函数返回时，其处于激活状态。
2、一个闭包就是当一个函数返回时，一个没有释放资源的栈区。

~~~ 一个闭包就是当一个函数返回时，一个没有释放资源的栈区

例1：

例2：

<script type="text/javascript">
function newClosure(someNum, someRef) {
// Local variables that end up within closure
var num = someNum;
var anArray = [1,2,3];
var ref = someRef;
return function(x) {
num += x;
anArray.push(num);
alert(‘num: ‘ + num + ‘ nanArray ‘ + anArray.toString() + ‘ nref.someVar ‘ + ref.someVar);
}
}
var closure1 = newClosure(40, {someVar:‘ never-online‘})
var closure2 = newClosure(99, {someVar:‘ BlueDestiny‘})
closure1(4)
closure2(3)
</script>

七、原型链
ECMAScript 为 Object 类型定义了一个内部 [[prototype]] 属性。这个属性不能通过脚本直接访问，但在属性访问器解析过程中，则需要用到这个内部[[prototype]] 属性所引用的对象链－－即原型链。可以通过一个公共的 prototype 属性，来对与内部的 [[prototype]] 属性对应的原型对象进行赋值或定义。

码农公寓

相关文章