this的指向在函数定义的时候是确定不了的,只有函数执行的时候才确定this到底指向谁
一般情况下this指向调用它的对象
下面我们来看看this被调用时的五种情况
思维导图
分析
1.作为对象方法被调用
当函数作为对象方法被调用时this指向该对象
var obj = { age: 18, fn: function () { console.log(this === obj);//true console.log(this.age);//18 } } console.log(obj.fn()); 2. 作为普通函数被调用时this指向全局对象window
严格模式下 this被规定不会指向全局 则是undefined
window.age = 18; function fn() { console.log(this.age);//18 } fn() 3.作为构造函数被调用时构造函数里面的this有点特殊 首先我们来了解一下构造函数跟普通函数的区别
//构造函数主要用来初始化对象 为对象的成员变量赋值初始值 他总于new一起使用
new在构造函数中做了哪些事
//1.在内存中创建一个新的对象
//2.让this指向这个新对象
//3.在构造函数里面的代码,给这个新对象添加属性和方法
//4.返回这个新对象 所以构造函数里面一般不需要return
了解之后我们再来看构造函数里面的this
构造函数里的this指向 new创建的实例化对象(没有return的情况下)
如果构造函数内出现了return并且是一个object对象那么最终的运算结果返回这个对象
只要构造函数不返回数据或者返回基本数据类型 this仍然指向实例
function Fn() { this.age = 18; //此时a.age是return的结果20 return { age: 20 } } let a = new Fn(); console.log(a.age);//20 4.箭头函数里面的this箭头函数里面没有自己的this 他只会从自己的作用域链上一层继承this
this.age = 20; var obj = { age: 18, fn: () => { console.log(this.age);//20 } } obj.fn()5.call&& apply&&bind
在function的原型上有三个方法 call apply bind,所有函数都是Function的实例,所以所有的函数都可以调用这三个方法,而这三个方法都是用来改变this指向的
call或apply调用 都是把函数立即执行改变函数中的this指向(第一个参数是谁this就是谁)apply同理 唯一的区别就是传参的格式不一样,apply把传递给函数的形参以数组的形式管理起来,最终的效果和call一样,也是把数组中的每一项作为实参,一个个的传递给函数真实项目中建议大家使用call,因为其性能好一些(三个及以上参数,call的性能明显比apply好一些)this存储的值 null.undefined.对象一个也不写,非严格模式下是window 严格模式下是undefinednull 严格模式下是null非严格模式下是window function fn(x, y) { console.log('加油'); console.log(this);//this指向window console.log(x + y); } var o = { name: 'andy' } fn.call()//call 呼叫 可以调用函数 fn.call(o, 1, 2)//第一个值是this指向, 后边实参 fn.apply(o, [10, 20])//apply传递数组 fn.call(10, 20)//this-->new Numbe(10) x-->20 y-->undefinedapply的应用小技巧 :获取数组中的最大值
let arr = [10, 20, 58, 79, 66] console.log(Math.max(arr));//NaN,要求传递数字,不是直接传递数组 console.log(Math.max(...arr));//es6中的展开运算符 console.log(Math.max.apply(Math, arr));重新call方法
fn基于__proto__找到Function.prototype.call 把call方法执行 在call方法执行的时候 content: obj要改变的this指向, params;[10, 20]执行函数传递的实参 this: fn要执行的函数
它干的事情是立即把fn(this)函数执行,并且让fn(this)中的this指向obj, 把10,20(params)传递给fn(this),接收fn执行的返回结果,作为最后结果返回
思路:给content设置一个属性(例如:xxx,新增的属性不要和原始content中的属性冲突(symbbol唯一值属性)) 让属性值等于要执行的函数(即:this[fn]),后面基于content.xxx()执行,这样即把函数执行了 ,也让函数的的this改成了content
Function.prototype.call = function call(content, ...params) { // this-->fn content-->obj params-->[10,20] // 思路:给content设置一个属性(例如:xxx,新增的属性不要和原始content中的属性冲突(symbbol唯一值属性)) 让属性值等于要执行的函数(即:this[fn]),后面基于content.xxx()执行,这样即把函数执行了 ,也让函数的的this改成了content if (content == null) content = window//this指向为null时指向window // 如果是原始值,字符串设置属性值之后获取不到要变成object if (! /^objet|funcion$/.test(typeof content)) content = Object(content)// let self = this, key = Symbol('KEY'), result; content[key] = self; result = content[key](...params) // delete content[key]//新增的属性用完后记得移除 Reflect.deleteProperty(content, key)//es6中可以基于Reflect.deleteProperty移除对象的某个属性 return result } const fn = function fn(x, y) { console.log(this, x, y); return x + y } let obj = { name: 'obj' } let res = fn.call(obj, 10, 20) console.log(res); // fn基于__proto__找到Function.prototype.call 把call方法执行 // 在call方法执行的时候 // content: obj要改变的this指向, params;[10, 20]执行函数传递的实参 this: fn要执行的函数 //它干的事情是立即把fn函数执行,并且让fn中的this指向obj, 把10,20传递给fn,接收fn执行的返回结果,作为最后结果返回bind
call VS bind
call是立即把函数执行,而bind只是预处理函数中的this和参数,不会立即执行
// 点击按钮 ,fn方法执行,我们想让其中的this变成obj ev事件对象也存在 在传递10/20
<button id="sumit">点击</button>const sumit = document.querySelector("#sumit") const fn = function fn(x, y, ev) { console.log(this, ev); } let obj = { name: 'obj' } sumit.onclick = fn;//点击按钮时this-->sumit x-->PointerEvent事件对象 // 点击按钮 ,fn方法执行,我们想让其中的this变成obj ev事件对象也存在 在传递10/20 // sumit.onclick = fn.call(obj, 10, 20)//这样处理是错误的,因为call把函数立即执行了 sumit.onclick = function (ev) { //先把事件行为绑定匿名函数,先执行匿名函数(获取ev对象)在匿名函数执行的时候this-->sumit,我们在让真正处理的fn函数执行,此时可以基于call方法改变this'了 fn.call(obj, 10, 20, ev) } sumit.onclick = fn.bind(obj, 10, 20)//这样就可以了重写bind
<button id="sumit">点击</button> Function.prototype.bind = function bind(context, ...params) { let self = this; // this-->fn contexxt-->obj params-->[10,20] return function proxy(...args) { // args-->ev this-->sumit return self.call(context, ...params.concat(args)) } } const sumit = document.querySelector("#sumit") const fn = function fn(x, y, ev) { console.log(this, ev); } let obj = { name: 'obj' } sumit.onclick = fn.bind(obj, 10, 20) 总结函数中的this指向
普通函数下this是window 严格模式下是undefined对象或方法this指向调用者构造函数里面的this指向实例对象(原型对象里面的this也指向实例对象 在本篇中没有展开)箭头函数没有自己的thiscall和apply可以改变this指向再来补充几条
绑定点击事件里面的this指向的是调用者定时器里面的this指向window立即执行函数里面的this指向window由此我们可以得出)函数执行的时候，看它前面有没有点，如果有，点前面是谁，this就是谁，如果没有，就是window
----------------------------------------------完结散花-----------------------------------------------------------------------
----------------接受壮观的玉米的批改和指点 ,欢迎留言------------------------------------------------------------------