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); //
}
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); //
}
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) //
},
fn2:function () {
console.log(this.a);//
}
}
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()(); //
obj.fn2()(); //
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); //