• bind源码解析



    if
    (!Function.prototype.bind) { Function.prototype.bind = function(oThis) { if (typeof this !== 'function') { // closest thing possible to the ECMAScript 5 // internal IsCallable function throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable'); } var aArgs = Array.prototype.slice.call(arguments, 1), fToBind = this, fNOP = function() {}, fBound = function() { // this instanceof fNOP === true时,说明返回的fBound被当做new的构造函数调用 return fToBind.apply(this instanceof fNOP ? this : oThis, // 获取调用时(fBound)的传参.bind 返回的函数入参往往是这么传递的 aArgs.concat(Array.prototype.slice.call(arguments))); }; // 维护原型关系 if (this.prototype) { // Function.prototype doesn't have a prototype property fNOP.prototype = this.prototype; } // 下行的代码使fBound.prototype是fNOP的实例,因此 // 返回的fBound若作为new的构造函数,new生成的新对象作为this传入fBound,新对象的__proto__就是fNOP的实例 fBound.prototype = new fNOP(); return fBound; }; }

    参考https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

    1. bind和call、apply一样会改变this的指向,但是bind返回的是一个函数,函数内部调用的apply方法。

    var o = {name:'wenwen'};
    var obj = {
            name: 'li',
            say: function(){
                console.log(this.name);
            }
    };
    var say = obj.say.bind(o);
    say();  //wenwen
    
    obj.say.call(o); //wenwen

    2. bind函数还保存了bind的调用方,可以使用new来初始化调用方。还可以实现属性和方法的继承,因为bind函数的特殊性,属性没办法再添加了,但是可以添加原型方法,不影响父类的原型。不过一般也不会这么用,主要用的还是上面的用法

    function foo(){
            this.b = 100;
            this.fun = function(){}
            return this.a;
        }
        foo.prototype.nfn = function(){}
        var func = foo.bind({});//这里要传入一个obj,不能为空,为空的话this会变成window,还可以实现继承,属性和原型都可以继承
        foo.prototype.test = function(){}
        func.prototype.name = 'wenwen1';
        func.prototype.b = 300;
        console.log(new func);
        console.log(new foo);
        func();

    jsonp原理

    其实就是封装了一个script标签,请求一个地址,支持callback函数,后台会返回一个执行的方法,从而实现回调和数据传输。

    <script type="text/javascript">
        $(document).ready(function(){
            var url = "http://www.practice-zhao.com/student.php?id=1&callback=jsonhandle";
            var obj = $('<script></script>');
            obj.attr("src",url);
            $("body").append(obj);
        });
    </script>
    
    
    <?php
    $data = array(
        'age' => 20,
        'name' => '张三',
    );
    
    $callback = $_GET['callback'];
    
    echo $callback."(".json_encode($data).")";
    return;
  • 相关阅读:
    http方法-get和post
    SVG
    canvas
    h5拖放
    jQuery表单事件
    html标签嵌套
    jquery.eq()
    jquery.index()
    Date对象
    json
  • 原文地址:https://www.cnblogs.com/wenwenli/p/9356089.html
Copyright © 2020-2023  润新知