整理this笔记

1.在浏览器全局环境中this指向的是Window

console.log(this); //Window

2.在事件处理函数中的this,这个事件是由谁触发,this就指向谁

3.直接执行一个函数的时候在非严格模式下this指向的是Window,而在严格模式下是undefined

function fn1() {
    "use strict"
     console.log(this); //undefined
}
function fn2() {
     console.log(this); //Window
}
fn1();
fn2(); //相当于window.fn2();

4.关于call,apply,和bind的this

他们的作用是把this的值从一个执行环境传入到另外一个执行环境

call和apply的区别只在于参数不同，call的参数后面可以是很多个的，而apply只能是俩个参数，后面一个参数是数组

function fn(x) {
      console.log(this.a + x); //3
}
fn.call({a:1},2);//第一个实参是对象，要改变this指向的对象，后面是你想要传的参数

如果传入的不是对象会调用相应的构造函数,进行隐式转换

function fn(x) {
    console.log(this); //Number{1}
}
fn.call(1); //bind和apply也一样

bind他会返回一个新的函数,改变这个新函数的执行,而且这个函数只会执行一次bind

function fn() {
    console.log(this.a);  //1
}
fn.bind({a:1})(); //返回一个新的函数，所以你要在执行这个返回的函数才会得到结果打印出1,不能在点bind

5.箭头函数里的this是与你定义的环境this一样的，并且使用call，apply和bind是改变不了箭头函数里的this

在全局中定义一个箭头函数，他指向的是Window

var fn = () => {
    console.log(this); //Window
}
fn();

在对象里定义一个箭头函数，他跟这个对象的环境是一样的

var a = 1;
var obj = {
    a:2,
    fn1:() => {
        console.log(this.a) //1
    },
    fn2:function () {
        console.log(this.a);//2
    }
}
obj.fn1();
obj.fn2();

在对象里返回一个箭头函数，他还是和对象的环境一样

var a = 1;
var obj = {
    a:2,
    fn1:() => {
        return ()=>{
            console.log(this.a);  
        }
    },
    fn2:function () {
        return function(){
            console.log(this.a);  
            }
    }
}
obj.fn1()(); //1
obj.fn2()(); //1

6.构造函数

构造函数里没有显式return

在构造函数中如果写return一个是对象，一个是非对象

当你返回一个对象的时候，实例化的结果就是这个对象

当你返回一个非对象的时候，实例化的结果就是这个构造函数

function  Fn() {
    this.a = 1;
    return {}; // {}
    return ""; // Fn(){a:1}
}
var fn = new Fn();
console.log(fn);

7.getter和setter,setter会自动刷新改变的数据

var obj = {
    a : 1,
    b : 2,
    get sum(){
        console.log("getter...");
        return this.a + this.b;
    },
    set sum(x){
        console.log("setter...");
        this.a = x*2;
        this.b = x*3;
    }
}

console.log(obj.sum = 4);  //setter...   4
console.log(obj.a);  //8

猜你喜欢