原型与原型链：JavaScript 的“家族关系”大揭秘

有人说JavaScript里“万物皆对象”但对象和对象之间怎么攀亲戚今天我们就来扒一扒JS的“家族关系”——原型和原型链。看懂了它你就理解了JS面向对象的核心也能明白为什么一个数组能调用那么多方法。前言如果你第一次接触原型可能会觉得它像个黑魔法明明没在那个对象上定义方法怎么就突然能用了比如constarr[1,2,3];arr.push(4);// 哪里来的push这个push方法既不是我们手动加的也不是数组本身自带的其实数组本身也没有不信你console.log(arr)看看。它是从“祖先”那里继承来的。今天我们就来扒一扒JavaScript这个家族的族谱看看对象们是怎么“攀亲戚”的以及怎么利用这门亲戚关系写出优雅的代码。一、原型是个啥简单来说原型就是一个普通的对象它被别的对象当作“备用方案”。当你访问一个对象的属性或方法时如果这个对象自己没有JavaScript就会去它的原型上找。如果原型上也没有就去原型的原型上找直到找到或者到达尽头。这个“备用方案”的链条就是原型链。1. 每个函数都有个prototype属性在JavaScript里每个函数都有一个prototype属性箭头函数除外。这个属性指向一个对象当这个函数被用作构造函数用new调用时创建出来的实例会继承这个prototype对象上的所有属性和方法。functionPerson(name){this.namename;}Person.prototype.sayHellofunction(){console.log(你好我是${this.name});};constzhangsannewPerson(张三);zhangsan.sayHello();// 你好我是张三这里sayHello不在zhangsan自己身上但它在Person.prototype上zhangsan通过原型链找到了它。2. 每个对象都有个__proto__属性每个对象除了null都有一个__proto__属性非标准但几乎所有浏览器都实现它指向该对象的原型即构造函数的prototype。console.log(zhangsan.__proto__Person.prototype);// true这个__proto__就是连接实例和原型的“脐带”。3. 构造函数也有自己的原型构造函数本身也是对象所以它也有__proto__。它指向Function.prototype因为所有函数都是Function的实例。console.log(Person.__proto__Function.prototype);// true二、原型链从孙子到老祖宗我们来看一个完整的查找链functionAnimal(name){this.namename;}Animal.prototype.eatfunction(){console.log(${this.name}在吃东西);};functionDog(name,breed){Animal.call(this,name);this.breedbreed;}Dog.prototypeObject.create(Animal.prototype);Dog.prototype.constructorDog;Dog.prototype.barkfunction(){console.log(汪汪汪);};constwangcainewDog(旺财,土狗);wangcai.bark();// 汪汪汪 (自己原型上的)wangcai.eat();// 旺财在吃东西 (从Animal原型继承来的)wangcai.toString();// [object Object] (从Object原型来的)当调用wangcai.eat()时查找过程是这样的先看wangcai自己身上有没有eat方法 → 没有去wangcai.__proto__也就是Dog.prototype上找 → 没有去Dog.prototype.__proto__也就是Animal.prototype上找 → 找到了eat如果还没找到继续往上到Animal.prototype.__proto__也就是Object.prototype还没找到就去Object.prototype.__proto__→ 这是null链条结束返回undefined这个链条就是原型链。它像一条家族血脉从孙子到儿子到父亲到爷爷到祖宗直到追溯到null。三、原型链的终点Object.prototype所有普通对象的原型链终点都是Object.prototype。Object.prototype本身的原型是null。console.log(Object.prototype.__proto__);// nullObject.prototype上定义了一些所有对象都有的方法比如toString()、hasOwnProperty()、valueOf()等。这就是为什么你的数组、函数、正则都能用这些方法。四、如何判断属性是自己的还是继承的有时候我们需要知道一个属性是对象自己拥有的还是从原型链上继承来的。这时候可以用hasOwnProperty()functionPerson(name){this.namename;}Person.prototype.age18;constpnewPerson(张三);console.log(p.hasOwnProperty(name));// true自己的console.log(p.hasOwnProperty(age));// false继承的console.log(ageinp);// true不管自己的还是继承的只要能访问到就返回truehasOwnProperty只检查自身属性in操作符会检查整个原型链。五、修改原型的影响千万别乱动原型是共享的所以如果你修改了原型所有继承自它的实例都会受影响。functionPerson(){}constp1newPerson();constp2newPerson();Person.prototype.sayfunction(){console.log(hello);};p1.say();// hellop2.say();// hello两个实例都有了Person.prototype.sayfunction(){console.log(world);};p1.say();// world瞬间都变了这个特性有时候很有用比如给内置类型添加方法但也非常危险。尤其是在多人协作的项目里随便修改原型可能导致难以追踪的bug。注意千万不要修改内置对象的原型比如Array.prototype、Object.prototype除非你非常清楚自己在做什么。这会污染全局导致不可预测的行为。六、原型链实现继承传统方式在ES6的class出现之前JS主要靠原型链实现继承。上面的Dog继承Animal就是经典写法// 1. 定义父类构造函数functionAnimal(name){this.namename;}Animal.prototype.eatfunction(){console.log(${this.name}吃东西);};// 2. 定义子类构造函数functionDog(name,breed){Animal.call(this,name);// 继承属性this.breedbreed;}// 3. 继承方法Dog.prototypeObject.create(Animal.prototype);Dog.prototype.constructorDog;// 4. 添加子类自己的方法Dog.prototype.barkfunction(){console.log(汪汪汪);};这三步是经典组合寄生继承ES6的class语法就是它的语法糖。七、ES6 class原型的“糖衣”现在写继承用class简单多了classAnimal{constructor(name){this.namename;}eat(){console.log(${this.name}吃东西);}}classDogextendsAnimal{constructor(name,breed){super(name);// 调用父类构造函数this.breedbreed;}bark(){console.log(汪汪汪);}}看着舒服多了吧但其实它底层还是原型那一套只是帮我们省去了手动操作prototype的麻烦。八、常见坑点与最佳实践1. 不要用__proto____proto__虽然能用但不是标准虽然现代浏览器都支持而且性能也不太好。用Object.getPrototypeOf()和Object.setPrototypeOf()替代。console.log(Object.getPrototypeOf(zhangsan)Person.prototype);// true2. 小心原型链上的属性被覆盖如果子类实例定义了与原型同名的属性会“遮蔽”原型上的属性。functionPerson(){}Person.prototype.name祖先;constpnewPerson();p.name自己;console.log(p.name);// 自己原型的被遮住了deletep.name;console.log(p.name);// 祖先删除自己的又露出来了3. 用Object.create()创建对象Object.create(proto)可以创建一个新对象它的原型直接指向proto。constparent{name:父亲};constchildObject.create(parent);child.age10;console.log(child.name);// 父亲从parent继承这是创建原型关系最简单的方式。4. 尽量用class少手动操作原型现代开发中class语法足够应对绝大多数场景代码更清晰不容易出错。九、总结原型链就是JS的“家谱”每个函数都有prototype属性指向原型对象每个实例都有__proto__属性指向构造函数的prototype访问属性时先在自身找找不到就沿着__proto__往上找直到null这个链条就是原型链Object.prototype是链条的终点上面定义了所有对象都有的方法ES6的class是原型的语法糖写起来更清爽理解了原型链你就能理解JS的继承机制也能更高效地利用这个“家族关系”来复用代码。明天我们将在此基础上深入讲解继承的多种实现方式从原型链继承到ES6 class一次性帮你理清JS继承的所有姿势。如果你觉得这篇文章讲得清楚明白点个赞让更多人看到。有疑问欢迎评论区留言我们明天见