怎么修改Vue.jsthis的指向

这篇文章主要讲解了“怎么修改Vue.js this的指向”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么修改Vue.js this的指向”吧！

十余年的凤翔网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销的优势是能够根据用户设备显示端的尺寸不同，自动调整凤翔建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联建站从事“凤翔网站设计”,“凤翔网站推广”以来，每个客户项目都认真落实执行。

修改 this 的指向可通过 apply、call、bind 这三个函数中的任意一个实现。那这三个函数是谁的方法呢?

在 MDN 中我查到了：

这张图说明了这 3 个函数是 Function prototype  的方法，也就是说「每个函数都有着三个方法」。当定义一个函数，这个函数默认包含这三个方法。

我们感受一下 Vue.js 中关于 apply、call 和 bind 的使用：

apply 的应用：

function once (fn) {   var called = false;   return function () {     if (!called) {       called = true;       fn.apply(this, arguments);     }   } }

call 的应用：

var hasOwnProperty = Object.prototype.hasOwnProperty; function hasOwn (obj, key) {   return hasOwnProperty.call(obj, key) }

bind的应用：

function polyfillBind (fn, ctx) {   function boundFn (a) {     var l = arguments.length;     return l       ? l > 1         ? fn.apply(ctx, arguments)         : fn.call(ctx, a)       : fn.call(ctx)   }    boundFn._length = fn.length;   return boundFn }  function nativeBind (fn, ctx) {   return fn.bind(ctx) }  var bind = Function.prototype.bind   ? nativeBind   : polyfillBind;

你可能看不懂上面的用法，下面我们一一抛开谜底。

当一个新事物的出现，总是有目的的，那么 apply、call 和 bind  的出现是为了解决什么问题呢?它们为什么是函数的方法呢?为什么不是其它对象的方法。

通过 apply、call 可以自定义 this 调用某个函数，比如定义一个全局函数(严格模式)：

'use strict'; function gFun(name, age) {     console.log(this); }

这个函数可以通过下面 5 种方式调用，也就是说通过 apply、call、bind 可以调用一个函数 F，其中「函数 F 执行上下文中的 this  可以在调用时指定」：

1.直接调用：

gFun('suyan', 20); // this 为 undefined

2.通过 this 调用：

this.gFun('suyan', 20); // this 为 window

3.通过 apply 调用，把所有的参数组合成一个数组作为 apply 的参数：

gFun.apply(this, ['suyan', 20]); // this 为 window

4.通过 call 调用，参数通过逗号分割，这是与 apply 调用的区别：

gFun.call(this, 'suyan', 20);  // this 为 window

5.通过 bind 调用，会返回一个原函数的拷贝，并拥有指定的 this和参数：

let bGFun = gFun.bind(this, 'suyan', 20); bGFun();  // this 为 window

我们一起看一些例子：

例1、setTimeOut 的使用：

const time = {     second: 1,     afterOneSecond() {         setTimeout(function () {             this.second += 1;             console.log(this.second);         }, 1000);     } }; time.afterOneSecond();

上面这段代码执行后，第 6 行代码的打印结果是 NaN，在连接你、我、他 —— this 这节课程中我们有提到过 this  设计的一个弊端是不能继承。其实可以通过 bind 改造一下这个函数：

const time = {     second: 1,     afterOneSecond() {         setTimeout(this.timeInvoke.bind(this), 1000);     },     timeInvoke() {         this.second += 1;         console.log(this.second);     } }; time.afterOneSecond();

函数 timeInvoke 通过 bind 绑定 this，并返回一个新的函数，执行结果为 2。bind 好像具有「暂存」的功能，把当前的 this  暂存起来。

例 2、函数调用

const person = {     name: 'suyan',     age: 20,     showName(pre) {         return pre + '-' + this.name;     },     update(name, age) {         this.name = name;         this.age = age;     } };  function generateName(fun) {     let name = fun();     console.log('showName = ', name); }  generateName(person.showName);

执行上面代码会报错，因为 showName 中的 this 为 undefined：

可以通过 bind 「暂存 this」：

const person = {     name: 'suyan',     age: 20,     showName(pre) {         return pre + '-' + this.name;     },     update(name, age) {         this.name = name;         this.age = age;     } };  function generateName(fun) {     let name = fun();     console.log('showName = ', name); } // 指定 this 为 person 对象 let bindShowName = person.showName.bind(person, '前端小课'); generateName(bindShowName);

例 3、构造函数，通过 call 来调用某个函数，替换 this。

function Product(name, price) {     this.name = name;     this.price = price; }  function Food(name, price) {     // 调用 Product 函数     Product.call(this, name, price);     this.catagory = 'food'; } let food = new Food('包子', 1); console.log(food.name); // 包子

例 4、调用匿名函数

const animals = [     {         name: 'King'     },     {         name: 'Fail'     } ];  for (let i = 0; i < animals.length; i++) {     (function (i) {         // 可以直接使用 this         this.print = function () {             console.log('#' + i + ' ' + this.name);         };         this.print();     }).call(animals[i], i); }

结果为：

感谢各位的阅读，以上就是“怎么修改Vue.js this的指向”的内容了，经过本文的学习后，相信大家对怎么修改Vue.js this的指向这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！