美文网首页前端基础学习
函数11（call、apply、bind）

函数11（call、apply、bind）

作者: 小雪洁 | 来源:发表于2020-04-26 22:11 被阅读0次
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>call()</title>
    </head>
    <body>
    </body>
    <script>
    //之前讲到的this指向当前对象、或指向window，如何改变this的指向
    //先以构造函数为例
        function User(name){
    //1、this在一开始没创建对象的时候是空的
            this.name=name; 
            //console.log(this);//
        }
    //2、使用new实例化后，就会创建一个对象，在User()里面的this指向这个对象
        let user=new User();//User {},this指向User,是个空的
        console.log(user);//User {name: undefined}
    //3、this是可以改变的，new之前可以让this不指向空，指向一个默认对象    
        let hdcms={url:"houdunren.com"};
        //使用User.call()改变构造函数里this的指向
        User.call(hdcms,'hxj');
        let user1=new User();
        console.log(user1);//User {name: undefined}
        console.log(hdcms);//{url: "houdunren.com", name: "hxj"}    
    </script>
</html>

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>call与apply异同点</title>
    </head>
    <body>
        <button>hxj</button>
        <button>ydc</button>
    </body>
    <script>
        let hxj={
            name:'haoxuejie'
        };
        let ydc={
            name:'yangdingchuan'
        };
        let hwx={
            name:'haoweixv'
        };
        function User(age=20,address="河北"){
            console.log(this.name+age+address);
        }
//使用call和apply共同点：
//第一个参数都是改变User里this的指向,
//而且使用call和apply都可以使函数立即执行
        User.call(hxj);//haoxuejie
        User.call(ydc);//yangdingchuan
        User.apply(hwx);//haoweixv
//call和apply的区别是两者的传参方式不同，
        //call传参就是直接逗号连接，
        User.call(hxj,'30','衡水');
        //apply传参是传数组
        User.apply(ydc,['28','平遥']);
//利用call或apply写一个按钮点击事件
        let btns=document.querySelectorAll("button");
        [...btns].forEach(function(btn){
            btn.addEventListener('click',function(e){
                //如果只是传一个改变this指向的参数，call()和apply()两者没有区别
                //show.call(e.target);
                show.apply(e.target);
            });
        });
        function show(){
            alert(this.innerHTML);
        }
        
//以下一个例子看看apply和call的区别，
        let arr=[1,2,34,5];
    //NaN，Math.max()方法里的参数是多个数字，而不是数组，直接传数组是不行的
        console.log(Math.max(arr));
    //使用展开语法展开传参
        console.log(Math.max(...arr));//34
    //或者使用 apply()，因为apply第二个参数是将所有参数以数组形式穿进去，
    //这个时候再用call()就不行了，因为call除了第一参数是改变this之外，后面的参数传参形式是一个一个的传
        console.log(Math.min.apply(Math,arr));//1
        console.log(Math.min.call(Math,arr));//NaN
//以上可见展开语法很好用
    </script>
</html>

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>call和apply实现构造函数方法继承</title>
    </head>
    <body>
    </body>
    <script>
        /* 
        function Article(){
            this.url="article/lists";
            this.get=function(params){
                let str=[];
                for(let key in params){
                    str.push(`${key}=${params[key]}`);
                }
                //console.log(str);// ["id=1", "cate=js"]
                console.log(`https://houdunren.com${this.url}/?${str.join('&')}`);
                return `https://houdunren.com${this.url}/?${str.join('&')}`;
            }
        }
        function User(){
            this.url="user/lists";
            this.get=function(params){
                let str=[];
                for(let key in params){
                    str.push(`${key}=${params[key]}`);
                }
                //console.log(str);// ["id=1", "cate=js"]
                console.log(`https://houdunren.com${this.url}/?${str.join('&')}`);
                return `https://houdunren.com${this.url}/?${str.join('&')}`;
                
            }
        } */
        //获取请求文章的url
        let a =new Article();
         a.get({id:1,cate:"js"});
        //获取请求用户的url
        let user=new User();
        user.get({id:1,role:'admin'});
//实际上Article()和User()中get方法是一样的，这时考虑函数复用，写成一个函数供他们调用
         function Request(){
            this.get=function(params){
                let str=[];
                for(let key in params){
                    str.push(`${key}=${params[key]}`);
                }
                //console.log(str);// ["id=1", "cate=js"]
                console.log(`https://houdunren.com${this.url}/?${str.join('&')}`);
                return `https://houdunren.com${this.url}/?${str.join('&')}`;
            }
         }
//函数复用中，要复用某个构造函数，在调用该构造函数的时候用call将this指向到当前对象
        function Article(){
            this.url="article/lists";
            Request.call(this);
        }
        function User(){
            this.url="user/lists";
            Request.call(this);
        } 
//进一步简化
        function Request0(url){
            this.url=url;
            this.get=function(params){
                let str=[];
                for(let key in params){
                    str.push(`${key}=${params[key]}`);
                }
                //console.log(str);// ["id=1", "cate=js"]
                console.log(`https://houdunren.com/${this.url}/?${str.join('&')}`);
                return `https://houdunren.com/${this.url}/?${str.join('&')}`;
            }
        }
        let a0=new Request0('article/lists');
        a0.get({id:1,cate:"js"});
        let user0=new Request0('user/lists');
        user0.get({id:1,role:'admin'});
    </script>
</html>

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>call和apply实现构造函数方法继承</title>
    </head>
    <body>
    </body>
    <script>
        /* 
        function Article(){
            this.url="article/lists";
            this.get=function(params){
                let str=[];
                for(let key in params){
                    str.push(`${key}=${params[key]}`);
                }
                //console.log(str);// ["id=1", "cate=js"]
                console.log(`https://houdunren.com${this.url}/?${str.join('&')}`);
                return `https://houdunren.com${this.url}/?${str.join('&')}`;
            }
        }
        function User(){
            this.url="user/lists";
            this.get=function(params){
                let str=[];
                for(let key in params){
                    str.push(`${key}=${params[key]}`);
                }
                //console.log(str);// ["id=1", "cate=js"]
                console.log(`https://houdunren.com${this.url}/?${str.join('&')}`);
                return `https://houdunren.com${this.url}/?${str.join('&')}`;
                
            }
        } */
        //获取请求文章的url
        let a =new Article();
         a.get({id:1,cate:"js"});
        //获取请求用户的url
        let user=new User();
        user.get({id:1,role:'admin'});
//实际上Article()和User()中get方法是一样的，这时考虑函数复用，写成一个函数供他们调用
         function Request(){
            this.get=function(params){
                let str=[];
                for(let key in params){
                    str.push(`${key}=${params[key]}`);
                }
                //console.log(str);// ["id=1", "cate=js"]
                console.log(`https://houdunren.com${this.url}/?${str.join('&')}`);
                return `https://houdunren.com${this.url}/?${str.join('&')}`;
            }
         }
//函数复用中，要复用某个构造函数，在调用该构造函数的时候用call将this指向到当前对象
        function Article(){
            this.url="article/lists";
            Request.call(this);
        }
        function User(){
            this.url="user/lists";
            Request.call(this);
        } 
//进一步简化
        function Request0(url){
            this.url=url;
            this.get=function(params){
                let str=[];
                for(let key in params){
                    str.push(`${key}=${params[key]}`);
                }
                //console.log(str);// ["id=1", "cate=js"]
                console.log(`https://houdunren.com/${this.url}/?${str.join('&')}`);
                return `https://houdunren.com/${this.url}/?${str.join('&')}`;
            }
        }
        let a0=new Request0('article/lists');
        a0.get({id:1,cate:"js"});
        let user0=new Request0('user/lists');
        user0.get({id:1,role:'admin'});
    </script>
</html>

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>bind </title>
    </head>
    <body>
        <button>hxj</button>
    </body>
    <script>
        //使用call、apply会立即执行、使用bind不会立即执行
        function show(){
            console.log(this.name);
        }
        show.apply({name:"hxj"});//hxj
        show.call({name:"ydc"});//ydc
        show.bind({name:"hwx"});//不输出，不会执行,得到一个新的函数
        show.bind({name:'hwx'})();//hwx
        let a =function(){
            
        };
        let b=a;
        console.log(a instanceof Object);//true
        console.log(typeof a);//function
        console.log(a===b);//true 函数赋值是传址
        b=a.bind();
        console.log(a==b);//false 即a.bind()又重新生成了一个函数
//在参数传递方面，call()和apply()因为是立即执行，所以在括号内就把参数传递进去
//bind不是立即执行,bind()括号里可以传参，或者在调用的时候在传参
        function sum(a,b){
            return this.f+a+b;
        }
        console.log(sum.call({f:1},2,3));//6
        //bind传参可以在调用的时候再传，也可以在bind()的时候传，
        //但是注意call、apply和bind的第一个参数都是赋给函数内部的this
        let func=sum.bind({f:1});//
        console.log(func(4,5));//10
        //如果在bind的时候传参，下面再调用的时候传参参数就不起作用了
        let func0=sum.bind({f:2},6,4);
        console.log(func0());//12
        console.log(func0(1,2));//12
//bind的应用,bind不是立即执行，所以在操作dom时，如果是等待用户某种操作以后再执行
//可以使用bind，如果使用call，这时还没等用户操作就会执行，而这时是获取不到点击的元素的
        document.querySelector("button").addEventListener('click',function(e){
            document.write(this.name+e.target.innerHTML);
        }.bind({name:'ydc-'})); 
    </script>
</html>

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>实现随机变色的小例子</title>
    </head>
    <body>
    </body>
    <script>
        function Color(elem){
            this.elem=elem;
            this.colors=['#ffcc66','#fedbca','#fff996',"#cdeaff",'#aabbcc'];
            this.run=function(){
                setInterval(function(){
//利用生成随机数，随机取得colors里面的颜色
                let i=Math.floor(Math.random()*this.colors.length);
                this.elem.style.backgroundColor=this.colors[i];
                }.bind(this),1000);
//使用bind(this)使得setInterval()里面的函数this指向该对象，否则它就指向window取不到color和elem
            }
        };
        let  obj=new Color(document.body);
        obj.run();
    </script>
</html>

    相关文章

      网友评论

        本文标题：函数11（call、apply、bind）

        本文链接：https://www.haomeiwen.com/subject/edeswhtx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        前端基础学习

        关于我们|服务条款|联系我们|函数11（call、apply、bind）|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！