liang14658fox

Appearance

  • exports
  • module.exports
  • import
  • mixin
  • `
  • `
  • `
  • `
  • `
  • `
  • `
  • `
  • `
  • `

原型的应用 ​

js中有两种调用函数的方法，比如 array.函数名()，是一种，还有 函数名(array) 是另外一种，我想自定一个函数，并且调用方式与第一种方式一样，怎么写？

你可以通过将自定义函数转换为数组方法来实现调用方式类似于 array.函数名() 的效果。为此，你需要将这个函数添加到数组的原型上，这样就可以在任何数组实例上使用这个函数。

例子：

js
// 定义自定义函数
Array.prototype.自定义函数名 = function() {
// 执行逻辑
console.log("自定义函数被调用了");
}

// 使用调用方式一：array.自定义函数名()
let array = [1, 2, 3];
array.自定义函数名(); // 输出 "自定义函数被调用了"

// 使用调用方式二：自定义函数名(array)
function 自定义函数名(arr) {
// 执行逻辑
console.log("自定义函数被调用了");
}
自定义函数名(array); // 输出 "自定义函数被调用了"
// 定义自定义函数
Array.prototype.自定义函数名 = function() {
// 执行逻辑
console.log("自定义函数被调用了");
}

// 使用调用方式一：array.自定义函数名()
let array = [1, 2, 3];
array.自定义函数名(); // 输出 "自定义函数被调用了"

// 使用调用方式二：自定义函数名(array)
function 自定义函数名(arr) {
// 执行逻辑
console.log("自定义函数被调用了");
}
自定义函数名(array); // 输出 "自定义函数被调用了"

在这个例子中，我们将自定义函数添加到原型上，并且可以在任何数组实例上使用 array.自定义函数名() 这种调用方式，与使用内置数组方法相同。同时，我们还可以使用传统的函数调用方式：自定义函数名(array)。

怎么应用到vue2项目中呢 在 Vue2 项目中，你也可以使用相同的方式将自定义函数添加到数组的原型上，从而在模板中使用调用方式类似于 array.函数名() 的效果。

例子：

js
// 定义自定义函数
Array.prototype.自定义函数名 = function() {
// 执行逻辑
console.log("自定义函数被调用了");
}

// 在 Vue2 项目中使用
<template>
<div>
<ul>
<li v-for="item in list" :key="item.id">
{{ item.name }}
<button @click="item.list.自定义函数名()">调用自定义函数</button>
</li>
</ul>
</div>
</template>

<script>
export default {
data() {
return {
list: [
{
id: 1,
name: "第一项",
list: [1, 2, 3]
},
{
id: 2,
name: "第二项",
list: [4, 5, 6]
},
{
id: 3,
name: "第三项",
list: [7, 8, 9]
}
]
}
}
}
</script>
// 定义自定义函数
Array.prototype.自定义函数名 = function() {
// 执行逻辑
console.log("自定义函数被调用了");
}

// 在 Vue2 项目中使用
<template>
<div>
<ul>
<li v-for="item in list" :key="item.id">
{{ item.name }}
<button @click="item.list.自定义函数名()">调用自定义函数</button>
</li>
</ul>
</div>
</template>

<script>
export default {
data() {
return {
list: [
{
id: 1,
name: "第一项",
list: [1, 2, 3]
},
{
id: 2,
name: "第二项",
list: [4, 5, 6]
},
{
id: 3,
name: "第三项",
list: [7, 8, 9]
}
]
}
}
}
</script>

在这个例子中，我们在 Vue2 的组件中定义一个数组 list，并且在组件的模板中使用 v-for 指令遍历数组中的每一项。每个数组项都有一个按钮，当点击按钮时会调用该项的 list.自定义函数名() 方法。这个自定义函数通过之前添加到数组原型上的定义可以在所有数组实例中使用。

需要注意的是，修改原型可能会影响所有数组实例，因此请谨慎使用。如果你只想在特定的组件或页面使用自定义函数，请将其定义为组件或页面的方法，而不是添加到数组原型上。

如果你想在整个 Vue2 项目中使用自定义原型函数，可以将其添加到项目的 main.js 文件中。main.js 文件是项目入口文件，通常用于引入全局组件、插件和其他配置。

你可以将自定义原型函数的代码添加到 main.js 文件的任何位置，在 Vue 实例化之前添加就可以了，如下所示：

js
import Vue from 'vue'
import App from './App.vue'

// 添加自定义原型函数
Array.prototype.自定义函数名 = function() {
// 执行逻辑
console.log("自定义函数被调用了");
}

new Vue({
render: h => h(App)
}).$mount('#app')
import Vue from 'vue'
import App from './App.vue'

// 添加自定义原型函数
Array.prototype.自定义函数名 = function() {
// 执行逻辑
console.log("自定义函数被调用了");
}

new Vue({
render: h => h(App)
}).$mount('#app')

如果你只想在某个组件或页面中使用自定义原型函数，可以将其添加到该组件或页面的 <script> 标签中，或将其定义为组件或页面的方法。