zoukankan      html  css  js  c++  java
  • 【JavaScript 6连载】四、apply和call的用法

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>04-apply和call方法</title>
    <script>

    // apply和call方法
    // 作用:可以设置函数的具体调用者,来修改函数的作用域
    // 第一个参数:就是指的是函数的调用者
    var color = 'green';
    var getColor = function(){
    var color = 'blue';
    console.log(color);
    console.log(this.color);
    }
    // getColor();
    // window.getColor();
    // getColor.apply(this);
    // getColor.call(this);


    var obj1 = {
    color:'yellow'
    };
    // 相当于obj1来调用getColor
    // getColor.apply(obj1);
    // getColor.call(obj1);

    var obj2 = {
    color:'red',
    }
    // 把getColor这个函数赋给obj2对象的属性abc
    // 如果obj2中有abc属性,那么下面的语句会修改abc属性,如果obj2中没有abc属性,那么就为obj2添加一个abc属性
    obj2.abc = getColor;
    // 调用obj2的abc属性
    // obj2.abc();


    function sum (num1,num2){
    return num1 + num2;
    }

    var result1 = sum(1,2);
    // console.log(result1);
    // apply方法传递调用函数的参数,需要使用数组,或者是类数组
    var result2 = sum.apply(this,[1,2]);
    console.log(result2);

    function callSum (num3,num4){
    return sum.apply(this,arguments);
    }
    var result3 = callSum(2,3);
    console.log(result3);


    // call方法传递调用函数的参数,是要一个一个的把实参传递进去
    var result4 = sum.call(this,5,8);
    console.log(result4);

    // 总结:apply和call方法:
    // 第一个参数类似,之后的参数不同。

    </script>
    </head>
    <body>

    </body>
    </html>

    实例二:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>创建对象</title>

    </head>
    <body>
    </body>
    <script>

    var xiaoming = {
    name:"小明",
    desc:function(v1, v2){
    console.log("我叫"+this.name+v1+v2);
    }
    }
    var xiaogang = null;
    xiaogang = {};
    xiaogang.name = "小刚";

    xiaoming.desc("xxxx", "yyyyy");
    // call/apply可以改变方法或者函数的调用者,method/functon.call(调用者,var1,var2,var3.....)
    xiaoming.desc.call(xiaogang, "aaaa", "bbbb");
    xiaoming.desc.apply(xiaogang, ["iiii", "jjjj"]);

    // 一个正常的构造器
    function Person(name, age) {
    this.home = "保护地球,人人有责!";
    this.name = name;
    this.age = age;
    this.desc = function(){
    console.log(this.name+" "+this.age+" "+this.home);
    }
    }

    var p1 = new Person("小红", 20);
    p1.desc();

    function Student() {
    // Person.call(this, "小军", 22);
    // Person.apply(this, ["小军", 22]);
    Person.apply(this, arguments)
    this.school = "青云学院";
    this.study = function(){
    console.log(this.name+"在"+this.school+"学习WEB前端编程技术!");
    }
    // this.desc = function(){
    // console.log(this.name+"在"+this.school+"学习WEB前端编程技术!");
    // }
    }
    var st1 = new Student("小军", 22);
    st1.desc();
    st1.study();

    </script>
    </html>

  • 相关阅读:
    【Golang基础总结】数组和切片的比较
    如何转载别人的文章
    C语言字节对齐问题详解
    幷查集拓展
    贪心
    dfs
    Trie
    哈夫曼树
    bfs
    并查集
  • 原文地址:https://www.cnblogs.com/7qin/p/10226450.html
Copyright © 2011-2022 走看看