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>
原文地址:https://www.cnblogs.com/alicezq/p/4824148.html