通过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.然后可以进行调用