JavaScript this 

<!doctype html>
<html lang='en'>
<head>
    <title>this</title>
    <script src="jquery-1.11.0.min.js"></script>
    <script>
    window.onload = function(){
        //函数中引用
        var x = 1;
        function f(){
            this.x;
        };
        console.log(x);

        //没有被绑定的对象，默认this指向window对象
        var x = 1;  
        function f1(){
            this.x=2;
        };
        function f2(){
            this.x=3;
        };
        f2();
        f1();
        console.log(x); //2
        
        //绑定对象
        var f = function(){
            console.log(this);
        }
        var o ={};
        o.name='sonia';
        o.action = f;
        o.action();  //o
        
        //对象中引用 this当前对象
        var o ={};
        o.name='sonia';
        o.action = function(){
            return this.name
        }

        //构造函数引用   this
        function F(name,age) {
            this.name = name;
            this.age = age
        };
        var f = new F('abc',20);

        //call  apply
        var name ='123';
        function f() {
            return this.name;
        };
        var o={};
        o.name ='sonia';
        o.action = f;
        //o.action();
        console.log(o.action.apply(o))  //sonia

        var name ='123';
        function f() {
            return this.name;
        };
        var o={};
        o.name ='sonia';
        o.action = f;
        //o.action();
        console.log(o.action.apply())  //123

        //面试题
        var number = 1;
        var obj ={
            number:2,
            showNumber:function() {
                this.number = 3;
                (function(){
                    console.log(this.number);
                })();    //函数自执行 this指向的是window
                console.log(this.number);
            }
        };
        obj.showNumber();


        //正则校验
        var value='123';
        var filter = /^go?gle$/;
        var filter2 = new RegExp('^go?gle$');
        if(filter.test(value)){
            console.log('ok');
        }



    }
    // $(function(){
    //     $("ul li").click(function(e){  //e.target
    //         $(this).css("color","#f60").siblings().css("color","#333");
    //     })
    // });
    </script>
</head>
<body>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
    </ul>
</body>
</html>
posted @ 2021-02-18 16:58  德乌姆列特  阅读(43)  评论(0)  编辑  收藏  举报