什么是this
this是javaScript中的一个关键字,是一个指针型变量,它动态指向当前函数的运行环境,this会执行上下文绑定一个对象,如何绑定一个对象呢?在不同条件下绑定的对象,这也是很多刚接触this的开发者捉摸不定的地方。
一,this指向
this在全局作用域下指向什么?
- 这个也是很简单,在全局this指向window
- 所以在全局作用域下,我们可以认为this指向window
consoe.log(this) //window
var name=“zhangyy”
console(this.name) //zhangyy
console.log(window.name) //zhangyy
但是在我们开发中基本不会直接全局作用域下直接使用this,通常我们都是在函数中使用,但是在函数中使用,函数被调用时,都会创建一个执行上下文。
- 我们先来看一个简单的代码
window
function fn(){
console.log(this)
}
//1,直接调用
fn() //打印 window
//2,使用call/apply调用
fn.call("zhangyy") // String {"zhangyy"}对象
//3,使用对象调用
var obj={
name:"zhangyy",
age:28
}
obj.fn() //obj对象
上面案例可以得出以下几点
- 1,函数在调用是,javaScript会默认给this绑定一个值
- this绑定和编写位置无关
- this的绑定和调用方式有关
- this在在运行是绑定
二,this绑定规则
2.1默认绑定
- 函数直接被调用,函数默认绑定时,函数中this指向全局对象window
//案例1
function fn(){
console.log(this) //window
}
fn() //window
//案例2
function fn1(){
console.log(this)
fn2()
}
function fn2(){
console.log(this) //window
}
fn1()
//案例3
fn3(){
console.log(this)
}
var obj={
name:"zhangyy",
fn:fn3
}
var obj1=obj.fn
obj1() //window
//案例4
function fn4() {
function fn5() {
console.log(this)
}
return fn5
}
var fn6 = fn4()
fn6() // window
- 从以上案例我们可以得出,打印出来都是window,为什么呢?
- 因为我们可以看调用函数的位置,没用进行任何对象的绑定,都是单独调用
2.2隐式绑定
- 函数调用位置中,是通过某个对象发起的函数调用
//案例1
function fn(){
console.log(this)
}
var obj={
name:"zhangyy",
age:28
}
obj.fn() //obj对象
//案例2
var obj1 = {
name: "obj1",
fn() {
console.log(this.name)
}
}
var obj2 = {
name: "obj2",
bar: obj1.fn
}
obj1.fn()//obj1
obj2.bar() //obj2
- 从以上案例我们可以得出,谁调用函数,this就绑定谁
- 2.显示绑定 apply/call/bind
- -显示绑定后,this就会明确的指向绑定的对象
function fn() {
console.log(this)
}
var obj={
name:"zhangyy"
age:"28"
}
fn.call(obj) //obj
fn.apply(obj)//obj
fn.apply("apply")//String {"apply"}
var newFn = fn.bind("newFn")
newFn() //String {"newFn"}
三,new绑定
function Person(name, age) {
this.name = name
this.age = age
}
var p1 = new Person("zhangyy", 29)
console.log(p1.name, p1.age)
var p2 = new Person("jiangjj", 29)
console.log(p2.name, p2.age)
四,this绑定优先级
- 默认规则的优先级最低
- 显示高于隐式绑定 //例如:obj.fon.call(“zhangyy”) 结果//String {“zhangyy”}
- new高于隐式绑定
- new高于显示绑定