资讯专栏INFORMATION COLUMN

Hard binding & Soft binding detailed explanati

xiyang / 3433人阅读

摘要:硬绑定会大大降低函数的灵活性,使用硬绑定之后就无法使用像隐式绑定或显示绑定来修改。如果可以给默认绑定指定一个全局对象和意外的值,那就可以实现和硬绑定相同的效果,同时保留隐式绑定或显示绑定修改的能力。

JavaScript中硬绑定与软绑定详解
JS中硬绑定这种方式可以把this强制绑定到指定的对象(除了使用new时),防止函数调用时应用默认绑定规则(非严格模式下全局对象-window
| global,严格模式下undefined)。硬绑定会大大降低函数的灵活性,使用硬绑定之后就无法使用像“隐式绑定”或“显示绑定”来修改this。

如果可以给默认绑定指定一个全局对象和undefined意外的值,那就可以实现和“硬绑定”相同的效果,同时保留“隐式绑定”或“显示绑定”修改this的能力。

// hard binding
if(!Function.prototype._hardBind) {
    Function.prototype._hardBind = function(oThis) {
        if(typeof this !== "function") {
            throw new TypeError("Function.prototype.softBind - what is trying to be bound is not callable.");
        }
        var aArgs = [].slice.call(arguments, 1);
        var fToBind = this;
        var fNOP = function() {};
        var fToBound = function() {
            return fToBind.apply(this instanceof fNOP ? this : oThis, aArgs.concat([].slice.call(arguments)));
        };
        if(this.prototype) {
            fNOP.prototype = this.prototype;
        }
        fToBond.prototype = new fNOP();
        return fToBond;
    };
}


// test code
function foo() {
    console.log("name: " + this.name);
}

var obj1 = {name: "obj1"};
var obj2 = {name: "obj2"};
var obj3 = {name: "obj3"};

var _foo = foo._hardBind(obj1);
_foo(); // "name: obj1"

obj2.foo = foo._hardBind(obj1);
obj2.foo(); // "name: obj1"

_foo.call(obj3); // "name: "obj1"

setTimeout(obj2.foo, 100); // "name: obj1"

// soft binding
if(!Function.prototype._softBind) {
    Function.prototype._softBind = function(oThis) {
        if(typeof this !== "function") {
            throw new TypeError("Function.prototype.softBind - what is trying to be bound is not callable.");
        }
        var aArgs = [].slice.call(arguments, 1);
        var fToBind = this;
        var fToBound = function() {
            return fToBind.apply((!this || (this === (window || global))) ? oThis : this, aArgs.concat([].slice.call(arguments)));
        };
        fToBound.prototype = Object.create(fToBind.prototype);
        return fToBound;
    };
}


// test code

function foo() {
    console.log("name: " + this.name);
}

var obj1 = {name: "obj1"};
var obj2 = {name: "obj2"};
var obj3 = {name: "obj3"};

var _foo = foo._softBind(obj1);
_foo(); // "name: obj1"

obj2.foo = foo._softBind(obj1);
obj2.foo(); // "name: obj2"

_foo.call(obj3); // "name: obj3"

setTimeout(obj2.foo, 100); // "name: obj1" 

可以看到,软绑定版本的foo()可以手动将this绑定到obj2或者obj3上,但如果应用默认绑定规则,则会将this绑定到oThis。

参考:You Dont Known JS

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/108201.html

相关文章

  • Elasticsearch本地 && docker-compose 安装

    摘要:安装前的检查安装之前,你需要先安装一个较新的版本的,最好的选择是,你可以从获得官方提供的最新版本的。 安装前的检查 安装 Elasticsearch 之前,你需要先安装一个较新的版本的 Java,最好的选择是,你可以从 www.java.com 获得官方提供的最新版本的 Java。 安装JDK sudo yum install java-1.8.0-openjdk.x86_64 ...

    zhangwang 评论0 收藏0

发表评论

0条评论

xiyang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<