JavaScript老梗之this对象

Js中的this关键词貌似是初学者必经的坑都不例外我们经常听到其他人说 this对象谁调用指向谁的确这是最容易理解的但是我们可以更加深入的去探索下加深印象以便更加灵活的适用它

这里不得不提下Js的执行环境它都有一个变量对象（variable object）这个变量对象是代码访问不到的只存在后台的保存在内存中的

执行环境顾名思义就是在运行和执行代码的之后才会存在的例如我们运行浏览器就相当于创建了全局环境这个全局环境属于浏览器的所以浏览器中全局对象是window对象

this，arguments这些内部对象只和Js的执行环境有关和它的声明环境无关而执行环境又是在代码执行的时候创建的所以this对象只有在执行运行的时候才确定到底指向什么对象

常用this调用的几个方式

1 作为函数调用

var name = 'zzz' ;

function myFn() {

console.log(this.name) ;

}

myFn() ;//zzz 此时this指向的是window

2作为对象的方法调用（延续上面例子我们添加个对象把myFn赋给对象的方法）

var name = 'zzz' ;

function myFn() {

console.log(this.name) ;

}

var obj = {name:'zwq'} ;

obj.myFn = myFn ;

obj.myFn() ;//zwq 通过（.或者[]）查找对象属性方法称“方法调用”

3 构造函数中的this(顾名思义可以构造一个对象的函数也是函数的一种)

function Fn() {

this.name = 'zwq' ;

this.job = 'engineer'

}

var fn = new Fn() ;(没有prototype只有__proto__)

console.log(fn.name)//zwq

适用new操作符创建函数实例的时候会发生以下几个过程 1.创建一个对象 2。将构造函数的作用域赋给新对象 3.相当于运行构造函数中代码所以此时this指向了新对象 4.返回新对象

console.log(Fn.__proto__===Function.prototype,Function.prototype.__proto__===Object.prototype,Object.prototype.__proto__===null)//ps：原型链的结构

4 apply和call调用

Js中一切都是对象最为突出的是函数也是对象函数对象都拥有call和apply方法该方法是为了动态改变this而出现的当某一个对象不想自己写方法就可以通过apply调用其它对象的方法或者一个函数

function sayName() {
console.log('myname is:'+this.name) ;
}
var student = {
name: 'zwq' ,
age: '20'
}
sayName.apply(student) ;// myname is:zwq 这里我们希望student对象有一个方法而自己又不想重新定义就可以借助apply和call用其他方法来操作这里this指向student

总结时刻记住this的指向不是声明静止的是动态的总是随着函数执行的时候绑定！！！！

JavaScript老梗之this对象

相关推荐