程序地带

JavaScript中的原型、原型链、原型模式


今天,咱来聊聊JavaScript中的原型跟原型链


原型跟原型模式

这一块的知识,主要是设计模式方面的。
首先,我们知道JavaScript是面向对象的。既然是面向对象,那它自然也有相应的类跟对象等概念。
在JavaScript中,function这个东西还是比较特殊的,它既能用来声明方法,还能用来声明一个类似C#/.NET中的类,然后new一下得到一个对象。
举例


//js中的function使用方式一:
function testFunc() {
cosnole.log(123456);
}
testFunc();//123456;
//js中的function使用方式二:在这里用到了构造函数模式
function Person(name, age) {
this.name = name;
this.age = age;
this.sayName = function () {
alert(this.name);
}
}
var person1 = new Person("qwe", 26);//function还可以new一个出来,得到一个对象。
person1.sayName();
console.log(person1.constructor === Person);//true
var person2 = new Person("fgh", 26);
person2.sayName();
console.log(person1.sayName === person2.sayName);//false,这里是个重点,person1跟person2的sayName方法是不一样的,是各自的方法
//方式二还可以这样用
Person("qwe", 26);
window.sayName();

思考:
既然person1.sayName===person2.sayName返回false,两个对象person1和person2各自的sayName方法虽然本身不同,实现的效果是一样的,那可不可以让每个对象调用的是同一个公共的方法sayName呢?答案是可以的。
这里有个优化方案


function Person(name, age) {
this.name = name;
this.age = age;
this.sayName = sayName;
}
function sayName() {
alert(this.name);
}
var person1 = new Person("qwe", 26);
var person2 = new Person("jkl", 26);
console.log(person1.sayName === person2.sayName);//true 这里是调用的公共的方法,不是各自自己的方法

以上的方案的确实现了想要的结果,但我们知道JavaScript是面向对象的,面向对象的三要素有个封装。但以上的方案并没有体现出封装的思想。更好的方式是通过原型模式来解决。


function Person() {
}
Person.prototype.name = "uip";//这里的Person是属性,不是构造函数,这个Person还有个属性prototype,原型模式便是通过这个来实现的
Person.prototype.age = 26;
Person.prototype.sayName = function () {
alert(this.name);
}
//另外一种写法
Person.prototype = {
name: "uio",
age = 26,
sayName = function () {
alert(this.name);
}
}
var person1 = new Person();
person1.sayName();

以上便是原型模式,也并非没有缺点,虽然不用在构造函数里面传递参数来初始化,但得到的对象属性都是一样的。这便是最大的问题。
怎么办呢?
构造函数模式可以通过构造函数来传递参数进行初始化,原型模式可以共享某些属性跟方法。那可不可以合二为一,将两者结合起来,岂不更好?
二者结合,代码如下:


function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype = {
sayName: function () {
alert(this.name);
}
}
var person1 = new Person("sdaf", 26);
person1.sayName();
var person2 = new Person("ssdf", 26);
person2.sayName();
console.log(person1.sayName === person2.sayName);//true,看到这里,相信便会体会到这个模式精妙之处了吧。sayName是共有的方法,大家共享。
原型链的问题

以下三句话特别重要,需要深刻理解。
1、每个函数都有个prototype属性,prototype是函数独有的属性。
2、每个对象都有个__proto__属性。__proto__是对象独有的属性。
2、每个函数的portotype的是Object的实例
在JavaScript中,继承便是通过原型链实现的。


function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype = {
sayName: function () {
alert(this.name);
}
}
var person1 = new Person("sdaf", 26);
console.log(person1.__proto__ === Person.prototype);//true
console.log(Person.prototype.__proto__ == Object.prototype);//true
//在这里说明一下,Person的基类是Object,Person的prototype是Object的实例,所以是个对象,它有__proto__这个属性,而这个属性等价于Object的prototype属性。
//这样一环扣一环,构成了一道链,便是所谓的原型链
console.log(Ojbect.prototype.__proto__ === null);//true
实战

既然明白以上的知识,怎么优雅地运用到实际工作中呢?
在搞Vue项目时,我们几乎不可避免地会通过EventBus进行组件通信。
每次都需要var bus=new Vue();
在这里便可以通过原型模式来优化。


Vue.prototype.$bus = new Vue(); // EventBus用于无关系组件间的通信。

在其他组件,便可以直接通过this.$bus发布订阅事件了。


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/ywjbokeyuan/p/14264368.html

随机推荐

shell sar命令的使用

 一、sar的概述  在我使用的众多linux分析工具中,sar是一个非常全面的一个分析工具,可以比较瑞士军刀,对文件的读写,系统调用的使用情况...

liuqi66 阅读(141)

kepler克卜勒_克卜勒_Kepler

(2014-11-1917:26)标签:临江仙有些爱不得不各安天涯。看到这句话时,心里忽然有一种沧桑奔流。好妥贴的句子!人生有多少爱恨情仇,是的...

阿瑜诶 阅读(782)

输入框禁止输入emoji表情

jq中使用$(function(){if(navigator.userAgent.indexOf('Android')>-1||navigator.userAgent.index...

疯糖 阅读(478)