• this和 闭包


    构造函数中的this

     //如果函数作为构造函数使用,this就指向它new处来的对象
    
       function S(){
           this.name="alice";
           this.age=30;
           console.log(this.name);
    
       }
       var a=new S();

    普通函数中的this

    //如果函数作为普通函数调用,this就指向window对象
    function foo(){
        this.name="alice";
        this.age=30;
        console.log(this.name);
    }
    foo();//alice
    console.log(window.name);//alice
    console.log(window.age);//30

    函数作为对象的一个属性

    函数作为对象的一个属性,如果函数作为对象的一个属性调用时,函数中的this指向该对象

    var obj={
        x:10,
        fn:function(){
           console.log(this.x);
    
      }
    
     };
    //obj.fn();//10
      var br={
          x:20
      };
    br.fn=obj.fn;
    br.fn();//20

    函数用call或apply调用

     var test = "Tony";
    function doSomething() {
        console.log(this.test);
    }
    var obj = {
        test:"Tom"
    };
    doSomething();//Tony;
    doSomething.call(obj);//doSomething中的this指向obj
    
    //示例
    function person(){
        this.name="alice";
        this.age=20;
    }
    function Man(){
        person.call(this);//this指向的是调用的对象
    }
    var s=new Man();
    console.log(s.name);//alice

    全局&普通函数的调用

    在全局环境下,this指向的是window对象

    console.log(this === window);//true

    普通函数调用时,其中的this也是指向的window对象

    var x = 10;
    var fn = function() {
    console.log(this);//window
    console.log(this.x);//10
    };
    fn();

    虽然函数f是在obj对象内部定义的,但是他任然是一个普通函数,this指向的还是window对象.

    var x = 20;
    var obj = {
        x:10,
        fn:function() {
            function f() {
                console.log(this);//window
                console.log(this.x);//20
            }
            f();
        }
    };
    obj.fn();

    构造函数prototype

    this代表的是当前对象的值,不仅仅是在构造函数的prototype,即便是在整个原型链中.

      function Fn(name, age) {
        this.name = name;
        this.age = age;
    }
    Fn.prototype.sayName = function() {
        console.log(this.name);
    };
    var f1 = new Fn("zhangsan", 20);
    console.log(f1.name);

    冒充 继承

    //冒充
    function Parent(name , age) {
            this.name = name;
            this.age = age;
            this.sayName = function() {console.log(this.name);}
        }
    
        function Child(name, age) {
    
    //        this.obj = Parent;//冒充
    //        this.obj(name, age);// 继承
    //        delete this.obj;// 删除继承
    
            Parent.call(this, name, age);
        }
        var c = new Child("zhangsan", 21);
        console.log(c.name);

    闭包

    1.函数作为返回值

    //fn()作用域里存放的是变量a=20; bar()作用域 里面的a会依赖用fn()作用域
    function fn(){
    
        var a=20;/ /局部变量在函数执行完成后未被销毁
        return function bar(m){
            if(m>a){
                console.log(m);
            }
        }
    }
    var test=fn();//test实际就是个function
    test(30);

    2.函数作为参数传递

    var a=20;
    var fn=function(m){
        if(m>a){
            console.log(m);
        }
    };
    
    //匿名函数 f是形参,fn是实参。中间部分是定义
    (function(f){
    
        var a=100;
        f(30);
    }) (fn);

     下面以个例子说明闭包
        <!DOCTYPE html>
        <html>
        <head lang="en">
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <ul id="ul">
                <li>0</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
            <ul>
                <li>0</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </body>
        </html>
        <script>

             var lis=document.getElementById("ul").getElementsByTagName("li");
        
             for( var i=0;i<lis.length;i++){
     
                    //匿名函数作用就是将每一次变量i的值存起来,让它不被销毁 形参a 实参i
                 (function(a){
        
                     lis[i].onclick=function(){
                      console.log(a);
                   
                     }
                 }(i))
        
             }
        </script>
  • 相关阅读:
    目前比较全的CSS重设(reset)方法总结
    UrlRewritingNet.UrlRewrite 中文文档
    CSS Hack汇总快查
    CSS8款CSS制作数据报表技巧
    CSS属性与JavaScript 编码方法对照表
    需要掌握的八个CSS布局技巧
    了解网页设计标准尺寸
    JavaScript是否为创造游戏准备好了
    JavaScript(2)
    CSS兼容
  • 原文地址:https://www.cnblogs.com/alicezq/p/4824148.html
Copyright © 2020-2023  润新知