JS原型模式

JS原型模式

• 首先说几句题外话，我们学了构造函数模式，类似于有了品牌的概念，阿迪、耐克都是不同的品牌，这些品牌私有的属性，也有公有的属性，比如它们出品的衣服都有公共的东西 --- 布料 （关键就是'公共'二字 找到最顶层就是布料）

1、温习构造函数模式

//构造函数模式中拥有了类和实例的概念，并且实例和实例之间是相互独立的， ---->实例识别
function CreateJsPerson(name,age) {
    this.name = name;
    this.age = age;
}
CreateJsPerson.prototype.writeJs = function() {
    console.log("my name is" + this.name + "i can write js la")
}
//prototype --->放到当前类的原型上

var p1 = new CreateJsPerson("A",18);
var p2 = new CreateJsPerson("B",19);
console.log(p1.writeJs === p2.writeJs);//true
// 基于构造函数模式的原型模式解决了方法或者属性的公有问题
// 即把实例之间相同的属性和方法提取成共有的公有的属性和方法
// 想让谁公有就把它放在CreateJsPerson.prototype上即可
复制代码

2.原型模式

• 记住下边3句比较重要的话 然后并配合着图理解
• 每一个函数数据类型(普通函数、类)都有一个天生自带的属性:prototype(原型),并且这个属性是一个对象数据类型的值
• 并且在prototype上浏览器天生给它加了一个属性constructor(构造函数),属性值是当前函数(类)本身
• 每一个对象数据类型(普通的对象、实例)也天生自带一个属性'proto',属性值是当前实例所属类的原型(prototype)

function Fn() {
    this.x = 100;
    this.sum = function() {

    }
};

Fn.prototype.getX = function() {
    console.log(this.x);
};
//再在公有链上增加一个sum
Fn.prototype.sum = function() {

}

var f1 = new Fn;
var f2 = new Fn;
console.log(Fn.prototype.constructor === Fn);
复制代码

• 附示意图

//所有对象类型都是Object的实例
//Object是JS中所有对象数据类型的基类(最顶层的类)
//f1 instanceOf Object --->true
//因为f1通过_proto_可以向上级查找,不管多少级,最后总能找到Object 类似于 儿子 --> 父亲 --->爷爷 --->太爷爷 --->祖宗
//在Object.prototype上没有__proto__这个属性 （因为没有意义）
复制代码

• 原型链模式
• f1.hasOwnProperty("x") ---> hasOwnProperty是f1的一个属性,但是我们发现在f1的私有属性上并没有这个方法,那么该如何处理呢？

1）通过对象名.属性名的方法获取属性值的时候,首先在对象的私有属性上进行查找,如果私有中存在这个属性,则获取的是私有属性值

2）如果私有的不存在,则通过__proto__找到所属类的原型(类的原型上定义的属性和方法都是当前实例公有的属性和方法),原型上存在的话,获取的是公有的属性值

3）如果原型上也没有,则继续通过原型上的__proto__继续向上查找,一直找到Object.prototype为止

4）这种查找的机制就是我们的"原型链模式"

f1.getX === f2.getX --->true
f1.__proto__.getX === f2.getX ---->true
// f1.__proto__.getX ---> 忽略私有的 直接查询公有的
// f2.getX --->查找私有的 查询不到再找公有的 
// 最终查到的是同一个getX 所以 返回true
f1.getX === Fn.prototype.getX --->true
// f1.getX --->查找私有的 查询不到 再查找公有的
// Fn.prototype.getX ---> 和f1.getX就是一个getX
f1.sum === f2.__proto__.sum // ---> false 因为f1.sum查找到的是私有的sum f2.__proto__.sum查找到是公有的sum
f1.sum === Fn.prototype.sum // ---> false 因为f1.sum查找到的是私有的sum Fn.prototype.sum 是原型链上公有的sum
f1.hasOwnProperty ---> 向上找了两级 f1.__proto__.__proto__.hasOwnProperty
//在IE浏览器中 我们原型模式也是同样的原理 但是IE浏览器怕你通过__proto__把公有的修改 禁止我们使用__proto__
f1.sum = function() {
    --->修改私有的
}

f1.__proto__.sum = function() {
    //---->修改所属类原型上的公有方法 --- IE不支持
}

Fn.prototype.sum = function() {
    // --->修改公有的sum
}
复制代码

• 动力: 这是我的学习笔记(来源于视频),您能从中得到收获和进步,是我分享的动力,帮助别人,自己也会更快乐
• 期望: 不喜勿喷,谢谢合作！如果涉及版权请及时联系我,马上删除!