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


    可能不少学习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: "+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:

    <script type="text/javascript">
    function setupSomeGlobals() {
    // Local variable that ends up within closure
    var num = 666;

    // Store some references to functions as global variables
    gAlertNumber = function() { alert(num); }
    gIncreaseNumber = function() { num++; }
    gSetNumber = function(x) { num = x; }
    }
    </script>
    <button onclick="setupSomeGlobals()">生成 - setupSomeGlobals()</button>
    <button onclick="gAlertNumber()">输出值 - gAlertNumber()</button>
    <button onclick="gIncreaseNumber()">增加 - gIncreaseNumber()</button>
    <button onclick="gSetNumber(5)">赋值5 - gSetNumber(5)</button>


    例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]] 属性对应的原型对象进行赋值或定义。


    相关技巧:

    应用call和apply还有一个技巧在里面,就是用call和apply应用另一个函数(类)以后,当前的
    函数(类)就具备了另一个函数(类)的方法或者是属性,这也可以称之为“继承”。看下面示例:

    // 继承的演示
    function base() {
    this.member = " dnnsun_Member";
    this.method = function() {
    window.alert(this.member);
    }
    }
    function extend() {
    base.call(this);
    window.alert(this.member);
    window.alert(this.method);
    }

    上面的例子可以看出,通过call之后,extend可以继承到base的方法和属性。

    顺便提一下,在javascript框架prototype里就使用apply来创建一个定义类的模式,

    其实现代码如下:

    var Class = {
    create: function() {
    return function() {
    this.initialize.apply(this, arguments);
    }
    }
    }
    解析:从代码看,该对象仅包含一个方法:Create,其返回一个函数,即类。但这也同时是类的
    构造函数,其中调用initialize,而这个方法是在类创建时定义的初始化函数。通过如此途径,
    就可以实现prototype中的类创建模式

    示例:
    var vehicle=Class.create();
    vehicle.prototype={
    initialize:function(type){
    this.type=type;
    }
    showSelf:function(){
    alert("this vehicle is "+ this.type);
    }
    }

    var moto=new vehicle("Moto");
    moto.showSelf();

  • 相关阅读:
    Jmeter使用beanshell对数据进行加密传输
    接口测试:提交报文消息数据的四种常见格式(Content-Type)
    【工作Vlog】Jmeter响应结果乱码解决方案
    【Vlog】Jmeter之使用beanshell将json提取器中的多个值拼接为一个列表
    Jmeter之Json提取器详解(史上最全)
    一个Jmeter模拟上传文件接口的实例
    一文带你了解ANR(测试人员)
    一次访问网页请求的全过程详解
    在浏览器中输入一个网址后,浏览器都做了什么?
    MAC抓包工具Charles安装及破解
  • 原文地址:https://www.cnblogs.com/stephenykk/p/3772412.html
Copyright © 2020-2023  润新知