JavaScript-this指向问题

this指向

script标签中的this指向

• 指向：window

<script>
	console.log(this)	// window
</script>

全局变量，全局方法，普通函数this指向需要看调用的环境

• 都省略了一个window.
• this指向全局-window

// 普通的函数调用
window.function myFun() {
	console.log(this);
}
myFun();	// window

var fun = 2;
===> 	window.fun =2;

• 在html中调用函数-window

// html 中的内容
<button onclick="myFun()"></button>

// 普通的函数调用
function myFun() {
	console.log(this);
}
// 这种在html中调用的还是指向：window

• 在html中定义一个元素，js中调用,this指向元素本身

<!-- html 内容 -->
<div id="divs"></div>

function myFun() {
	console.log(this);
}
divs.myFun()	// <div id="divs"></div> 指向了元素本身	

setInterval 中的this指向

• 指向：window

setInterval(function() {
	var a = 1
	console.log(a);
	console.log(this);
},1000)
相当于 ===> 
window.setInterval(function() {
	var a = 1
	console.log(a);
	console.log(this);
},1000)
// 所以this指向window

箭头函数

• 指向：作用域的上一层的this

var obj = {
	naem : "momo",
	fun() {
		setInterval( () => {
			console.log(this.name);
		},200)
	}
}
obj.fun();	
// 本来setInterval中的this指向window，
// 但是我们使用了箭头函数，所以this指向了箭头函数作用域的上一层this

对象函数调用

• 指向：那个函数调用就指向那个函数

var obj = {
	fun : function() {
		console.log(this ,"++++++++++");
	}
}
obj.fun();	// 指向函数本身

构造函数

• 指向：实例化对象

function Person(){
	console.log(this,"++++++")
}
var p = new Person();
console.log(p) 

对象中的this指向

• 指向：这里的this指向obj(谁调用this所在的函数，那么this就指向谁。)

var obj = {
    name:'张三',
    fn:function(){
        console.log("你好，我叫"+this.name);    ///你好，我叫张三
    }
}

类中的this指向

• 指向：无论是在ES5还是ES6中，类中的this都是指向的这个类，也可以说是指向的通过类实例化的对象

apply() 与 call 中的this

• call()—中的this指向的是第一个参数

function say(a,b) {
	console.log(this,a+b);
}
say(5,2);	// (window ,7) 直接调用时函数为全局方法，this指向window
say.call({name : "momo",age : 18},3,5)		// ({name : "momo",age : 18},8) this指向了第一个参数对象

• apply()—中的this指向的是第一个参数

function say(a,b) {
	console.log(this,a+b);
}
say(5,2);	// (window ,7) 直接调用时函数为全局方法，this指向window
say.apply({name : "momo",age : 18},[3.5])		
// ({name : "momo",age : 18},8) this指向了第一个参数对象
// 后面的参数，可以为数组

• bind()—可以返回一个新的函数方法this指向可以定义，第一个参数

function say(a,b) {
	console.log(this,a+b);
}
say(5,2);	// (window ,7) 直接调用时函数为全局方法，this指向window

var sa = say.bind({name : "momo",age : 18});
sa();	// ({name : "momo",age : 18})	this指向对应的第一个参数对象

var sa = say.bind({name : "momo",age : 18},10);
sa(5);	// ({name : "momo",age : 18},15)	
// this指向对应的第一个参数对象,
// sa(5),传递的参数被当作say()函数的第二个参数

var sa = say.bind({name : "momo",age : 18},10,5);
sa();	// ({name : "momo",age : 18},15)	
// this指向对应的第一个参数对象

综合案例

• 求数组最大值

var arr = [2,3,45,67,323,1];
var max = Math.max.apply(null,arr);	// 传递的参数以数组的形式传递
alert(max)	// 323

• 判断对象的类型 typeof 不准
• 所以使用以下方法

function getType(arg) {
	var type = Object.protoType.toString.call(arg);
	return type.slice(8,-1);
}
console.log(getType([]));	// Array
console.log(getType(/a/g));	// RegExp 正则
console.log(getType(123));	// Number
console.log(getType(""));	// String
console.log(getType(document.bodt));	// HTMLBodyElement	dom对象