day14 || 和 &&运算符的赋值、this指向

一、|| 和 && 运算符的赋值

• 或运算符

  从左向右，哪个值为真，就取哪个值 var a = 10 || 11; // 10 var a = null || 11; // 11

• 且运算符

  • 第一个值为假，就取第一个值；
  • 第一个值为真，就取第二个值。

    var b = null && 2; // null var b = 10 && 20; // 20

二、this关键字

1、全局作用域下，this指向window

function aa () {
    console.log(this);
}

2、函数执行的时候，看函数前边有没有 点 ，有的话，点前面是谁，this；如果没有，就是window(严格模式下为undefined)

function fn(){
  console.log(this)
}
fn(); //这里的this就是window，在严格模式下就是undefined
var obj={
  name:"li", 
  fn:fn, 
}
obj.fn(); //这里的this就是obj

3、給元素绑定事件的时候，当事件触发，函数执行时，里面的this就是当前绑定的元素

// 给元素绑定事件
// ele.onclick = function () {
//     console.log(this); 
// }

4、自执行函数中的this，非严格模式下指向window

• 非严格模式下：window
• 严格模式下：undefined

// 自执行函数里的this
(function () {
    console.log(this);  // window
})()

5、回调函数里面的this指向window（严格模式下也是window）

// 回调函数里面的this
setTimeout (function () {
    console.log(this);  // window
}, 1000)
function fn(callback) {
    console.log(this);
    callback();
}
fn(function () {
    console.log(this); // window   严格模式下为undefined
})

6、通过 类 创造的实例，构造函数中的this指的就是当前的实例

// 通过类 创建的实例，构造函数中的this指的就是当前实例
function fn2() {
    this.name = aaa;
    this.age = 10;
}
var f1 = new fn2(); 
var f2 = new fn2();

7、this指向可以通过call、apply、bind改变

// 利用call() 该变this指向
function aa () {
    console.log(this);
}
var obj = {
    name : "111",
    age : 12
}
aa.call(obj);

8、箭头函数中没有this，也没有arguments；但是箭头函数中用this，就去他的上级作用域去找（作用域链）

练习题

// 练习题1
let obj={
  name:"li", 
  fn:(function(n){
       // 这里的this
       console.log(this);
       return function(){
          // 这里的this
          console.log(this);
       }
  })(10), 
}
obj.fn(); 
// 练习题2
var num=10; 
var obj={num:20}; 
obj.fn=(function(num){
   this.num=num*3; // window.num = 60
   num++; // 自执行函数的num = 21
   return function(n){
       this.num+=n;  // window.num = 60+5   obj.num = 20+10
       num++;  // 自执行函数的num=22    自执行函数的num=22+1
       console.log(num); // 自执行函数的num=22    自执行函数的num=22+1
   }
})(obj.num); 
var fn=obj.fn; 
fn(5); // 函数执行的时候，fn()前边没有点，this指向window
obj.fn(10); // 函数执行的时候，fn()前边是obj，this指向就是obj
console.log(num, obj.num) // 65，30
// 练习题3  ！！
var a = 1;
var obj1 = {
    a: 0,
    fn1: (function (a) {
        this.a = a;
        a++;
        return function () {
            this.a = a++;
            console.log(a)
        }
    })(a)
};
obj1.fn1();
var fn1 = obj1.fn1;
fn1();
console.log(a);
console.log(obj1.a);
// 练习题4
var num = 1;
var obj = {
    num: 2,
    fn: (function () {
        this.num *= 2;
        num += 3;
        var num = 1;
        return function () {
            num += 2;
            this.num += 2
            console.log(++num);
        }
    })()
};
var f = obj.fn;
f();
obj.fn();
console.log(window.num, obj.num);
// 练习题5
var num = 10;
var obj = {
    num: 15
};
obj.fn = (function (num) {
    this.num += 10;
    num *= 2;
    return function (n) {
        this.num += n;
        console.log(n + (--num));
    }
})(obj.num);
var fn = obj.fn;
fn(10);
obj.fn(15);
console.log(window.num, obj.num);

练习题答案

// 练习题3
var a = 1;
var obj1 = {
    a: 0, // obj1.a = 0  ==> 2
    fn1: (function (a) {
        this.a = a; // window.a = 1       
        a++; // 私有a = 1+1      
        return function () {
            this.a = a++; // obj1.a = 私有a=2,私有a++=3;     window.a = 私有a = 3,私有a++ = 4
            console.log(a) // 私有a = 3  ;    私有a = 4
        }
    })(a)
};
obj1.fn1();
var fn1 = obj1.fn1;
fn1();
console.log(a); //3
console.log(obj1.a); //2
// 练习题4
var num = 1;
var obj = {
    num: 2, // obj.num = 2        ==> 4   
    fn: (function () {
        // var 了私有num = undefined ==>4      
        this.num *= 2; // window.num = 1*2     
        num += 3; // 私有num = undefined+3     
        var num = 1; // 私有num = 1           
        return function () {
            num += 2; // 私有num = 1+2        私有num = 4 + 2
            this.num += 2 // window.num = 1*2 + 2       obj.num = 2+2
            console.log(++num); // 私有num = 1+2+1      私有num = 4+2+1
        }
    })()
};
var f = obj.fn;
f();
obj.fn();
console.log(window.num, obj.num); // 4,4
// 练习题5
var num = 10;
var obj = {
    num: 15
};
obj.fn = (function (num) {
    // 传入实参num = 15
    this.num += 10; // window.num = 10+10
    num *= 2; // 私有num = 15*2
    return function (n) {
        this.num += n; // window.num = 20+10            obj.num = 15+15
        console.log(n + (--num)); // 10+（私有num）30-1      15+(私有num)29-1
    }
})(obj.num);
var fn = obj.fn;
fn(10);
obj.fn(15);
console.log(window.num, obj.num); // 30，30