javascript中this的四种指向分别是什么-创新互联
小编给大家分享一下javascript中this的四种指向分别是什么，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
在实现自己的call,apply,bind前，需要复习一下this.
所谓的this其实可以理解成一根指针：
其实 this 的指向，始终坚持一个原理：this 永远指向最后调用它的那个对象,这就是精髓。最关键所在
this的四种指向：
当this所在的函数被普通调用时，指向window，如果当前是严格模式，则指向undefined
function test() {
console.log(this);
};
test();
指向window 输出下面的代码：
// Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: DeprecatedStorageInfo…}严格模式
'use strict';
function test() {
console.log(this);
};
test();
// undefined当this所在当函数被以obj.fn()形式调用时，指向obj
var obj = {
name: 'segmentFault',
foo: function() {
console.log(this.name);
}
}
obj.foo();
// 'segmentFault'还可以这么做
function test() {
console.log(this.name);
}
var obj = {
name: 'qiutc',
foo: test
}
obj.foo();
// 'qiutc'当call,apply加入后，this的指向被改变了
function a(a,b,c) {
console.log(this.name);
console.log(a,b,c)
}
const b = {
name: "segmentFault"
}
a.call(b,1,2,3)
//输出 segmentFault和 1,2,3
function a(a,b,c) {
console.log(this.name);
console.log(a,b,c)
}
a.apply(b,[1,2,3])
//输出segmentFault和1,2,3遇到bind后 ：
function a() {
console.log(this.name);
}
const b = {
name: "segmentFault"
}
a.bind(b, 1, 2, 3)此时控制台并没有代码输出，因为bind会重新生成并且返回一个函数，这个函数的this指向第一个参数
function a() {
console.log(this.name);
}
const b = {
name: "segmentFault"
}
const c = a.bind(b, 1, 2, 3)
c()
//此时输出segmentFault正式开始自己实现call :
在函数原型上定义自己的myCall方法：
Function.prototype.myCall = function (context, ...arg) {
const fn = Symbol('临时属性')
context[fn] = this
context[fn](...arg)
delete context[fn]
}四行代码实现了简单的call，思路如下：
通过对象属性的方式调用函数，这个函数里面的this指向这个对象
每次调用新增一个symbol属性，调用完毕删除
这个symbol属性就是调用mycall方法的函数
函数形参中使用...arg是将多个形参都塞到一个数组里，在函数内部使用arg这个变量时，就是包含所有形参的数组
在调用 context[fn](...arg)时候，...arg是为了展开数组，依次传入参数调用函数
为了简化，今天都不做类型判断和错误边际处理，只把原理讲清楚。
自己实现apply
在函数原型上定义自己的myApply方法：
//实现自己的myApply
Function.prototype.myApply = function (context, arg) {
const fn = Symbol('临时属性')
context[fn] = this
context[fn](...arg)
delete context[fn]
}
const obj2 = {
a: 1
}
test.myApply(obj2, [2, 3, 4])同理，只是apply传递的第二个参数是数组，这里我们只需要在调用时，将参数用...把数组展开即可
自己实现bind：
bind跟apply,call的本质区别，bind不会改变原函数的this指向，只会返回一个新的函数（我们想要的那个this指向），并且不会调用。但是apply和bind会改变原函数的this指向并且直接调用
bind在编写框架源码，例如koa等中用得特别多：
//实现自己的myBind
Function.prototype.myBind = function (context, ...firstarg) {
const that = this
const bindFn = function (...secoundarg) {
return that.myCall(context, ...firstarg, ...secoundarg)
}
bindFn.prototype = Object.create(that.prototype)
return bindFn
}
var fnbind = test.myBind(obj, 2)
fnbind(3)同理 自己定义好原型上的myBind方法
this劫持 保留最初的调用mybind方法的那个对象
返回一个新的函数 这个新的函数内部this指向已经确定，使用的是我们的mycall方法
学习需要循序渐进，建议根据本文顺序去封装一遍，是比较轻松的，当然bind还需要判断是否是new调用.
完整版本bind
Function.prototype.myBind = function (objThis, ...params) {
const thisFn = this; // 存储源函数以及上方的params(函数参数)
// 对返回的函数 secondParams 二次传参
let fToBind = function (...secondParams) {
console.log('secondParams',secondParams,...secondParams)
const isNew = this instanceof fToBind // this是否是fToBind的实例 也就是返回的fToBind是否通过new调用
const context = isNew ? this : Object(objThis) // new调用就绑定到this上,否则就绑定到传入的objThis上
return thisFn.call(context, ...params, ...secondParams); // 用call调用源函数绑定this的指向并传递参数,返回执行结果
};
fToBind.prototype = Object.create(thisFn.prototype); // 复制源函数的prototype给fToBind
return fToBind; // 返回拷贝的函数
};以上是“javascript中this的四种指向分别是什么”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联成都网站设计公司行业资讯频道！
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
网页标题：javascript中this的四种指向分别是什么-创新互联
网页地址：http://scjbc.cn/article/esopj.html
