[JavaScript知识库]通过Vue.prototype.$message = Message看原型链

前言:

平常我们在写项目的时候,经常会使用Vue.prototype.$message = Message,将它挂载到Vue的原型上。方便我们直接使用:

? ?this.$message 就可以直接进行访问

一.Vue的实例

这样就可以在任意的vue实例文件上访问到了,原型链的定义,现在自身的prototype里面去找,如果找不到就去prototype上面去进行查找。

通过这个可以看出,第一层的原型是Vue自己的prototype,第二次的原型是Object这个对象。

二.在类的方法上挂载方法。

? class Cat {

? ? constructor(name, age) {

? ? ? this.name = age

? ? ? this.age = age

? ? }

? ? sing() {

? ? ? console.log('唱歌');

? ? }

? }

? let s1 = new Cat('小花', 10)

? console.log(s1);

? s1.sing()

new出来的实例对象为什么能够到类上的方法。

打印出的s1的结果：

?所以能够访问。

三.原型继承????????

function Person(name, age) {
    this.name = name
    this.age = age
}
Person.prototype.say = function () {
    console.log('Hello World')
}

function Star(name, age) {
    Person.call(this, name, age)
}

Star.prototype = new Person()
Star.prototype.constructor = Star

const s = new Star('舒总', 18)
s.say() // 'Hello World'????????

解析:

?1.在Person的原型挂载一个say方法。

2.? 将new出来的实例化的原型赋值给Start的原型

3.然后可以进行调用