说说js的原型链及继续那些事

藏宝库编辑 · 2024-9-2 05:49:08

一：原型链

先说三个js原型链通用规则

1、每个对象都有__proto__属性，指向它的构造函数的prototype(不外这个__proto__由兼容性题目，在IE11从前用不了)
2、每个函数都有一个prototype属性
3、函数也是对象
先验证第一第二个规则
function Person(){}Person.prototype.age = 12;let justin = new Person();console.log(justin.__proto__ === Person.prototype); // trueconsole.log(justin.age);//12原型链

所谓原型链，也就是，查找对象的属性或方法时会从
对象本身 => 对象的构造函数.prototype =>
构造函数的(父)构造函数.prototype(如果中央有继续的话) =>...=>
Object.prototype => null
在上面的代码中查找age的时间，原型链是清楚且简朴的，也就是
justin => Person.prototype => Object.prototype => null
由于justin上，没有age属性，age属性是在Person.prototype上的，
且 justin.__proto__ === Person.prototype，以是
从justin => Person.prototype(justin.__proto__) 这一步是没有题目
那我们来验证一下，Person.prototype => Object.prototype 这一步
function Person(){}Person.prototype.age = 12;let justin = new Person();console.log(justin.__proto__ === Person.prototype); // trueconsole.log(justin.age);//12// ---------- 以下是新加的内容-------------// 我们知道justin.__proto__ === Person.prototype; // 全等号console.log(jusin.name);// undefined;Object.prototype.name = 'bob'; // 留意这里我们设置的是Object.prototype.nameconsole.log(justin.name);// bobconsole.log(Person.prototype.__proto__ === Object.prototype);// trueconsole.log(Object.prototype.__proto__ === null); // 全等号以是justin原型链的大抵布局图如下，如果Person中央有继续其他类的话，则会在Object.prototype
和Person.prototype之间有相应的.prototype对象插入此中，详细不细说了。
justin原型链图片

__proto__兼容性

二：继续

js怎样实现继续？我们修改一下上面的代码
/** * 第一种方法 */function Person(){}Person.prototype.age = 1

erson.prototype.boss = '王多鱼'

erson.prototype.sayHello = function(){ console.log('hello');}function ZuAnRen(){}ZuAnRen.prototype.sayHello = function(){ console.log('wdnmd');}// 我们造一个祖安人let za1 = new ZuAnRen();// 怎样让ZuAnRen继续Person呢？// 如今za1的原型链是如许的： za1 => ZuAnRen.prototype => Object.prototype => null// 要让ZuAnRen继续Person，也就是在ZuAnRen.prototype => Object.prototype之间插入一个Person.prototype// 而 ZuAnRen.prototype 也是个对象，以是也有__proto__属性// 以是试试如许ZuAnRen.prototype.__proto__ = Person.prototype;console.log(za1.boss);// 王多鱼分析我们乐成了！za1.sayHello(); // wdnmd/** * 第二种方法(使用class和extends，不细说) */三：详细扒拉function中的proto

由于function也是一个对象，以是也有一个__proto__对象
以是，像上面的Person.__proto__便是谁呢？
答案是 Function.prototype
由于function就是由Function创建的(这里留意，反面的Function首字母大写)
那Function.__proto__呢？
答案还是Function.prototype
function Person(){ }console.log(Person.__proto__ === Function.prototype); // trueconsole.log(Function.__proto__ === Function.prototype); // true末了补全原型链一张图

说说js的原型链及继续那些事

所属分类: 问答交流

新帖推荐: 30日

推荐作品