温故
我们先简明扼要的回顾一下前几天所讨论的内容,总的来说就是一下几点
- 原型对象prototype
- 隐式原型__proto__
- 构造函数constructor
原型对象prototype
还记得prototype是什么吗?
在构造函数new对象的时候,告诉构造函数新创建的对象的原型是谁。
我们将对象简单的分成了两类
- 函数对象
- 普通对象
普通对象都是通过函数创建的,
每一个函数对象都有一个prototype属性,但是普通对象是没有的。
好了,不再展开讨论了,如果忘记了,可以翻看我们之前的讨论。
隐式原型__proto__
- 为了确保浏览器兼容性问题,不要直接使用 __proto__ 属性
- 普通对象的__proto__指向当前函数对象的原型prototyp,
- 内置函数对象的__proto__指向的都是? () { [native code] }
- 所有对象(除了Object.prototype)都存在__proto__
- Object的原型对象的__proto__为null
注意:普通对象的__proto__指向(这里的“指向”可以理解为全等“===”)当前函数对象的原型prototype,这一结论使我们将__proto__和prototype关联了起来,原型链就是靠__proto__形成的
构造函数constructor
constructor是原型对象上的一个属性,默认指向这个原型的构造函数
我们把昨天的代码粘贴过来
function Foo(name) {
this.name = name;
}
var foo = new Foo('陌上寒');
console.log(Foo.prototype.constructor===Foo)//true
console.log(foo.constructor===Foo);//true
Foo是foo的构造函数,foo是Foo的实例,
同样的
Foo.prototype是Foo的实例
所以
prototype下的constructor属性返回对创建此对象的函数的引用。
(构造函数constructor,这部分内容我们放在明天详细讨论)
?知新
如题,我们今天重点要说的就是prototype在vue中的应用
通过vue-cli3.x搭建了一个项目,项目地址已上传到github
毕竟vue不是js原生代码,我们得先通过代码了解一下vue
在main.js入口文件中
import Vue from 'vue'
//无关代码省略
console.log(Vue)
//无关代码省略
我们观察输出
//控制台输出如下
? Vue (options) {
if ( true &&
!(this instanceof Vue)
) {
warn('Vue is a constructor and should be called with the `new` keyword');
}
this._init(options);
}
提示我们Vue是一个构造函数,必须使用new关键字进行实例化,好吧我们再来一次
import Vue from 'vue'
//无关代码省略
var vm = new Vue()
console.log(vm)//输出一个对象(对象很大,就不贴了)
//无关代码省略
也就是Vue这个构造函数经过实例化后,得到一个对象(好像是废话),构造函数是有prototype的,对吧
我们看一下
var vm = new Vue()
//Vue 存在原型
console.log(Vue.prototype);
//普通对象的__proto__指向当前函数对象的原型
console.log(vm.__proto__===Vue.prototype)
js通过原型链可以实现继承那么我们可以对Vue.prototype进行操作,对Vue.prototype添加属性或者方法,所有通过new Vue创建的实例都可以继承这些属性或方法,例如我们在main.js 中添加如下代码
//无关代码省略
Vue.prototype.myName="陌上寒"
//无关代码省略
我们通过路由配置了两个页面(vue-cli默认自带的)Home和About,我们分别打印
//我们分别在两个页面中添加如下代码
created() {
console.log(this.myName);//陌上寒
}
Home 页面和About页面分别打印出了 陌上寒,这个不意外,我们再做一下改动
Home.vue代码如下
//我们分别在两个页面中添加如下代码
created() {
console.log(this.myName);//陌上寒
this.myName="陌二哥"//重新赋值
console.log(this.myName);//陌二哥
}
继续,About.vue代码如下
//我们分别在两个页面中添加如下代码
created() {
console.log(this.myName);//陌上寒
}
我们看到了,在Home页面对myName进行了重新赋值,当页面从Home跳转到About后,myName并没有更新,这是怎么回事呢?
原型赋值与全局变量
原型赋值和全局变量不是一回事。要区别开来
因为每一次跳转到新的Vue页面,都是一个独立的Vue实例,实例中this.myName从Vue.prototype.myName而来,所以仍然是“陌上寒”。
也就是说Home.vue和About.vue都从Vue.prototype那继承一些属性和方法,继承后,各自想怎么玩怎么玩,但是不能相互影响,设想一些,如果可以随便改变继承源头的属性和方法,岂不是要乱套了?(类似于子组件不能修改父组件的值,他们是一个道理)
那么我就是想在vue中使用全局变量,怎么办呢?这个不是我们今天要讨论的主题,不过我们可以简单的说一下
vue中使用全局对象
如果你用过vue的bus,你就一定会添加全局变量了,当然,在vue中添加全局变量的方法不唯一,我们只介绍这一种
在main.js中
//省略无关代码
new Vue({
router,
store,
data() {
return {
website: "https://www.qdtalk.com",
}
},
render: h => h(App)
}).$mount('#app')
在其他页面中就可以使用this.$root.website进行读写操作了,
this.$root.website="陌上寒个人博客"
console.log(this.$root.website)
在实际开发过程中,不论是全局对象还是原型赋值,都会用到的,好了今天就到这里
明天我们重点讨论javascript中的构造函数,不见不散
最新评论
这小生活不错呀
不错,必须顶一下!
看着你还在坚持,很好
看来忙了也没时间更新博客了
NIce。学习了。。。。
网站不错!!!!
简洁实用,好文章!
不错,过来支持一下