Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to modify the direction of Vue.js this". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to modify the direction of Vue.js this".

Changing the direction of this can be achieved by any one of the three functions apply, call, and bind. So whose method are these three functions?

I found out in MDN:

This diagram shows that these three functions are Function prototype methods, that is, "each function has three methods". When defining a function, the function contains these three methods by default.

Let's feel the use of apply, call, and bind in Vue.js:

Application of apply:

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

Application of call:

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

Application of 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

You may not understand the above usage, so let's put aside the answers one by one.

When a new thing appears, there is always a purpose, so what problem is the emergence of apply, call and bind to solve? Why are they functional methods? Why it's not the method of another object.

Through apply and call, you can customize this to call a function, such as defining a global function (strict mode):

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

This function can be called in the following five ways, that is, a function F can be called through apply, call, and bind, where "the this in the context of function F execution can be specified when called":

1. Call directly:

GFun ('suyan', 20); / / this is undefined

two。 Call through this:

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

3. Through the apply call, all the parameters are combined into an array as parameters to apply:

GFun.apply (this, ['suyan', 20]); / / this is window

4. With call calls, parameters are separated by commas, which is different from apply calls:

GFun.call (this, 'suyan', 20); / / this is window

5. Through the bind call, a copy of the original function is returned with the specified this and parameters:

Let bGFun = gFun.bind (this, 'suyan', 20); bGFun (); / / this is window

Let's look at some examples:

Example 1. The use of setTimeOut:

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

After the execution of the above code, the printed result of line 6 of the code is NaN. In the course of connecting you, me, and him-- this, we mentioned that one of the disadvantages of this design is that it cannot be inherited. You can actually modify this function through bind:

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

The function timeInvoke binds this through bind and returns a new function with an execution result of 2. Bind seems to have a "temporary" function to temporarily store the current this.

Example 2. Function call

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)

Executing the above code will report an error, because the this in showName is undefined:

You can "temporarily store this" through bind:

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) } / / specify this as the person object let bindShowName = person.showName.bind (person, 'front-end lesson'); generateName (bindShowName)

Example 3. Constructor, which calls a function through call to replace this.

Function Product (name, price) {this.name = name; this.price = price;} function Food (name, price) {/ / call Product function Product.call (this, name, price); this.catagory = 'food';} let food = new Food (' steamed buns', 1); console.log (food.name); / / steamed buns

Example 4. Call an anonymous function

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); } 结果为：

Thank you for your reading, the above is the content of "how to modify the direction of Vue.js this", after the study of this article, I believe you have a deeper understanding of how to modify the direction of Vue.js this, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.