this问题

new 操作符

new 操作符执行过程

  1. 创建一个空对象,构造函数中的this指向这个空对象。
  2. 这个新对象被执行 [[原型]] 连接。
  3. 执行构造函数方法,属性和方法被添加到this引用的对象中。
  4. 如果构造函数中没有返回其它对象,那么返回this,即创建的这个的新对象,否则,返回构造函数中返回的对象。

模拟实现 new

function newCo(constructor, ...args) {
    // 1.
    let obj = {},
        res = null;
    // 2.
    obj.__proto__ = constructor.prototype;
    // 3.
    res = constructor.apply(obj, args);
    // 4.
    return typeof res === 'object' ? res : obj;
}

this 校验

使用 es6 的箭头函数做构造函数时,new会报错。

var Te = () => {}

var obj1 = new Te();    // Uncaught TypeError: Te is not a constructor

在 newCo 基础上,增加对 constructor 的检测。

// ....
    if (!constructor.prototype) {
        throw new Error(constructor.name + ' is not a constructor');

        return;
    }

//....

call、apply、bind

三者都是用来改变this指向的。 区别是,

  • call和apply是在函数执行的时候改变this指向,而bind是返回一个已经改变this指向的新函数。
  • call和apply的区别是,call只支持参数单个传入,而apply不仅支持单个传,还支持数组的形式传参,所以apply用的稍微比call广些。
  • 我们可以通过 bind 实现柯里化。

模拟实现 call 方法

// ES5 版
function callES5() {
    var ctx = arguments[0] || window,
        args = [];

    ctx.fn = this;

    for (var i = 1, len = arguments.length; i < len; i++) {
        args.push('arguments[' + i + ']');
    }
    var result = eval('ctx.fn(' + args +')');

    delete ctx.fn;

    return result;
}

// ES6 版
function callES6(ctx, ...args) {
    ctx = ctx || window;
    ctx.fn = this;

    let result = ctx.fn(...args);

    delete ctx.fn;

    return result;
}

模拟实现 apply 方法

function applyES5() {
    var ctx = arguments[0] || window,
        argu = arguments[1],
        args = [];

    ctx.fn = this;

    for (var i = 0, len = argu.length; i < len; i++) {
        args.push('argu[' + i + ']');
    }
    var result =  eval('ctx.fn(' + args +')');

    return result;
}

function applyES6(ctx, args) {
    ctx = ctx || window;
    ctx.fn = this;
    args = args || [];

    let result = ctx.fn(...args);
    delete ctx.fn;

    return result;
}

模拟实现bind方法

Function.prototype.mybind = function() {
    var ctx = arguments[0] || window,
        args = Array.prototype.slice.call(arguments, 1),
        that = this;

    return function() {
        args = args.concat(Array.prototype.slice.call(arguments));
        that.apply(ctx, args);
    }
}
Copyright & copy https://www.zhuyuntao.cn 2019 all right reserved,powered by Gitbook该文件修订时间: 2019-11-03 12:36:28

results matching ""

    No results matching ""