封装原生的JS，vue中封装全局使用的函数

我就是我 2022-05-16 02:28 215阅读 0赞

function fun () \{  
alert (this) //指向的是函数事件调用者  
\}  
fun () 这里的this，指向的是window  
new fn() new 的函数指向的不是window而是指向了该函数新的对象，目的是改变指针，创建对象实例  
function fun1 () \{  
this.x= 10  
\}  
var aa = new fun1()  
aa.x

原型 让某一个大类都有某个方法  
var arr = \[\]  
arr.run = function () \{  
alert(‘123’)  
\}  
arr.run()  
var arr1 = \[\]  
arr1.run() // 报错没有这个方法  
那如何让只要是数组，就拥有run 这个方法呢？  
换句话我们定义的函数无论谁使用都有这个方法  
这个时候可以使用prototype 原型来实现  
Array.prototype.run = function \{  
// 只要是数组都会调用这个方法  
alert(‘415’)  
\}  
var aa = \[\]  
aa.run()  
var bb = \[\]  
bb.run()  
都会弹出415

JS封装原型函数  
![这里写图片描述][70]

在vue项目中，我们组要一些全局的JS函数，随处使用，如何做呢？  
首先我们在项目中创建一个JS文件，然后用export default 导出去

export default { 
      install (Vue, options) {
     }
    }

在main.js 中注册使用：

import processData from '@/js/processData.js'
    Vue.use(processData)

就可以在全局中使用了

在公用JS文件中定义vue原型函数

export default {
      install (Vue, options) {
        // 处理饼图数据
        Vue.prototype.processPieData = function (title, series) { 
          this.title = title
          this.seriesData = series
          let legendData = []
          let piedata = {}
          for (let v of this.seriesData) {
            legendData.push(v.name)
          }
          piedata.title = this.title
          piedata.seriesData = this.seriesData
          piedata.legendData = legendData
    
          return piedata
        }
        }
        }

如何使用定义的processPieData 函数？  
`let aa = this.processPieData(title, seriesData)` 使用this来调用  
我们可以将公共的JS都放在这个文件中，使用prototype定义的vue全局韩式可以实现全局使用。

[70]: /images/20220516/5fcc8b71ca0944a598f64b64a12aaec9.png