在具体的实际应用中，this 的指向无法在函数定义时确定，而是在函数执行的时候才确定的，根据执行时的环境大致可以分为以下3种：
1、当函数作为普通函数调用时，this 指向全局对象
2、当函数作为对象的方法调用时，this 指向该对象
3、当函数作为构造器调用时，this 指向新创建的对象
示例一：
window.name = 'myname';function getName() { console.log(this.name);}getName(); //输出myname
登录后复制
示例二：
var boy = { name: 'Bob', getName: function() { console.log(this.name); }}boy.getName(); //输出Bob
登录后复制
示例三：
function Boy(name) { this.name = name;}var boy1 = new Boy('Bob');console.log(boy1.name); //输出Bob
登录后复制
对于示例三，还有一种特殊情况，就是当构造函数通过 “return” 返回的是一个对象的时候，此次运算的最终结果返回的就是这个对象，而不是新创建的对象，因此 this 在这种情况下并没有什么用。
示例四：
function Boy(name) { this.name = name; return { //返回一个对象 name: 'Jack' }}var boy1 = new Boy('Bob');console.log(boy1.name); //输出Jack
登录后复制
示例五：
function Boy(name) { this.name = name; return 1; //返回非对象}var boy1 = new Boy('Bob');console.log(boy1.name); //输出Bob
登录后复制
call 和 apply 的作用
apply 接受两个参数，第一个参数指定了函数体内 this 的指向，第二个参数是一个数组或类数组，用于传递被调用函数的参数列表。
示例一：
function getInfo() { console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);}var boy1 = { name: 'Bob', age: 12}getInfo.apply(boy1,['sing','swimming']); //输出Bob like sing and swimming
登录后复制
call 传入参数的数量是不固定的，跟 apply 相同的是，第一个参数也是用于指定函数体内 this 的指向，从第二个参数开始往后，每个参数被依次传入被调用函数。
示例二：
function getInfo() { console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);}var boy1 = { name: 'Bob', age: 12}getInfo.call(boy1,'sing','shopping'); //输出Bob like sing and shopping
登录后复制
此外，大部分高级浏览器还实现了 bind 方法，它与 call 和 apply 的区别在于 bind 只是改变函数内部 this 的指向，但不会立即执行，你需要显示调用它。
示例三：模拟浏览器的 bind 方法
Function.prototype.bind = function(obj){ var self = this; return function(){ return self.apply(obj,arguments); }};var obj = { name: 'Bob', age: 12};var func = function(){ console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);}.bind(obj);func('sing','shopping');
登录后复制
丢失的 this
在某些情况下会丢失 this 的指向，此时，我们就需要借助 call、apply 和 bind 来改变 this 的指向问题。
示例一：当 “getName” 方法作为 “boy” 对象的属性调用时，this 指向 “boy” 对象，当另外一个变量引用 “getName” 方法时，因为它是作为普通函数调用，所以 this 指向全局对象window
var boy = { name: 'Bob', getName: function() { console.log(this.name); }}boy.getName(); //输出Bobvar getBoyName = boy.getName;getBoyName(); //输出undefined
登录后复制
示例二：即使在函数内部定义的函数，如果它作为普通对象调用，this 同样指向 window 对象
var boy1 = { name: 'Bob', age: 12, getInfo: function() { console.log(this.name); function getAge() { console.log(this.age); } getAge(); }}boy1.getInfo(); //Bob //undefined
登录后复制
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
NodeJS父进程与子进程资源共享步骤详解
JS匿名自执行函数概念与使用说明
JS把链接生成二维码图片方法分析
以上就是JS中this的指向以及call、apply的作用（图文教程）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2761153.html
