javascript call 与apply 学习

call 与apply 的作用就是改变this的指向

function test(name){
console.log(name)
}

调用函数test 的时候 我们直接运行test('hello') 即可,实际上js 引擎是这样运行的:test.call(window,'hello'),可以理解为test函数被window调用 并传入了 "hello"参数.

定义一个构造函数Person:

function Person(name,age){
this.name = name; this.age = age;
}

实例化一个Person对象:

var  p1 = new Person('wang',24)// {name: "wang", age: 23}

使用call可以这样:

var obj={};
Person.call(obj,'ou',23);
console.log(obj)//{name: "ou", age: 22}

上面可以理解为obj借别人的方法构造了自己的对象,Person构造函数中的this指向了call的 第一个参数 obj，说明了 call的 作用 就是改变this指向.

一个简单的应用:

 function Person(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    }

    function Student(name, age, sex, tel, grade) {
        Person.call(this, name, age, sex);
        this.tel = tel;
        this.grade = grade;
    }

    var st1 = new Student('crazyming', 23, '男', '10086', 100);
    console.log(st1);//{name: "crazyming", age: 23, sex: "男", tel: "10086", grade: 100}

apply 和 call 的作用 是一模一样的, 唯一的区别就是 参数的传递 apply是使用数组的形式 传递参数

上方的例子改为使用apply实现:

 function Person(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    }

    function Student(name, age, sex, tel, grade) {
        Person.apply(this,[name, age, sex]);
        this.tel = tel;
        this.grade = grade;
    }

    var st1 = new Student('crazyming', 23, '男', '10086', 100);
    console.log(st1);//{name: "crazyming", age: 23, sex: "男", tel: "10086", grade: 100}

在开发中经常用到的地方:
1.遍历元素的节点,由于元素集合是类数组,没有数组的方法,例如当我们想使用foreach遍历元素集合时可以这样:

  Array.prototype.forEach.call("这是个元素节点".parentNode.children, function (item) {
      // do something
        });