<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>原型链模式</title>
</head>
<body>
<script type="text/javascript">
function CreatJSPerson2(name,age) {
// 浏览器会默认创建的对象就是我们的实例p2 -> this
this.name = name;
this.age = age;
// 浏览器再把创建好的实例默认返回
}
CreatJSPerson2.prototype.writeJS = function () {
console.log("my name is " + this.name + " i can write JS now");
};
var p2 = new CreatJSPerson2("ldh",18);
p2.writeJS();
var p3 = new CreatJSPerson2("ryy",19);
p3.writeJS();
console.log(p1.writeJS === p2.writeJS); // -> true
// 构造函数模式中拥有了类和实例的概念,并且实例和实例之间是相互独立开发的->实例识别
// 基于构造函数模式的原型模式解决了方法或者属性共有的问题,把实例之间相同的属性和方法提取成共有的属性和方法 想让谁共有就把他放在CreatJsPerson.prototype上即可
// 1.每一个函数数据类型(普通函数,类)都有一个天生自带的属性:prototype(原型),并且这个属性是一个对象数据类型的值
// 2,并且在prototype上浏览器天生给他加了一个属性constructor(构造函数),属性值是当前函数或者是当前类本身
// 3.每一个对象数据类型(普通对象类型,实例,prototype...)也天生自带一个属性:__proto__,这个属性值是当前实例所属类的原型(prototype)
function Fn() {
this.x = 100;
this.sum = function () {
};
}
Fn().prototype.getX = function () {
console.log(this.x);
}
Fn().prototype.sum = function () {
}
var f1 = new Fn();
var f2 = new Fn();
console.log(Fn.prototype.constructor === Fn); // true 验证12条
// dir(Object.prototype) 查看Object的
// 1.f1 instanceof Object -> true 因为f1通过__proto__可以向上级查找,不管有多少级,最后总能找到Objcect
// 2.在Object.prototype上没有__protot__这个属性
f1.hasOwnProperty("x") // -> hasOwnProperty 是f1的一个属性
// 3.原型链模式
// f1.hasOwnProperty("x") // -> hasOwnProperty是f1的一个属性
// 但是我们发现在f1的私有属性上并没有这个方法那我们怎么处理呢?
// 通过 对象名.属性名 的方式获取属性值得时候,首先在对象的私有的属性上进行查找,如果私有中存在这个属性,则获取的是私有的属性值
// 如果私有的没有 , 则通过__proto__ 找到所属类的原型(类的原型上定义的属性和方法都是当前实例共有的属性和方法),原型上存在的haunted,获取的是公有的属性值
// 如果原型上也没有,则继续通过原型上__proto__继续向上查找,一直找到Object.prototy为止...
// 如果都没有 那么就是undefined
// f1.getX === f2.getX //-> true
// f1.__proto__.getX === f2.getX; //->true
// f1.getX = Fn.prototype.getX; // -> true
// f1.sum === f2.__proto__.sum; // -> false
// f1.sum === Fn.prototype.sum; // -> false
// f1.hasOwnProperty -> f1.__proto__.__proto__.hasOwnProperty;
// 在IE浏览器中,我们原型模式也是同样的原理,但是IE浏览器怕你通过__proto__ 把共有的修改,禁止我们使用 __proto__
f1.sum = function () {
// 修改自己私有的sum
}
f1.__proto__.sum = function () {
// 修改共有的sum
}
</script>
</body>
</html>
15-原型链模式基础
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
