🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
你将学到: * 每个函数中都有一个prototype属性,该属性所存储的就是原型对象; * 为原型对象添加属性; * 使用原型对象的新增属性; * 区分对象自身属性和原型属性; * __proto__,用于保存各对象原型的神秘链接; * 介绍原型方法 * 强化内建对象 ***** # 原型属性 prototype ## 添加方法和属性 * 新建对象时添加方法和属性 * 通过构造器函数的prototype属性来增加该构造器所能提供的功能 ## 使用原型的方法和属性 理解原型的"live"驻留概念 对象都是通过传引用的方式传递的,新对象的的属性和方法指向原型对象,共享一份属性和方法。当我们修改原型,则相关对象也都会修改。 ``` function Gadget(name, color){ this.name = name; this.color = color; this.whatAreYou = function(){ return 'I am a ' + this.color + ' ' + this.name; } } Gadget.prototype // {constructor: ƒ} // constructor: ƒ Gadget(name, color)__proto__: Object Gadget.prototype = { price: 100, rating: 3, getInfo: function(){ return 'Rating: ' + this.rating + ', price: ' + this.price; } } var newtoy = new Gadget('webcam', 'black'); newtoy.color; // "black" newtoy.name // "webcam" newtoy.whatAreYou(); // "I am a black webcam" newtoy.price; // 100 newtoy.rating; // 3 newtoy.getInfo(); // "Rating: 3, price: 100" Gadget.prototype.get = function(what){ return this[what]; }; newtoy.get('price'); // 100 newtoy.get('color'); // "black" ``` ## 自身属性与原型属性 自身属性 --> 原型属性obj.constructor.prototype(亦 obj.__proto__) 每个对象都会有一个构造器,原型也是对象,原型也有构造器,构造器又会有自己的原型。这就形成了一个原型链 prototype chain,最后一环一定时Object内建对象。 ## 自身属性重写原型属性 自身属性优先于原型属性,属性重名的情况下。 判断可枚举属性的方法 `propertyIsEnumerable()` 判断属性归自身还是原型 `hasOwnProperty()` 所有原型属性,`propertyIsEnumerable()`都会返回false ## isPropertyOf() 当前对象是否是另一个对象的原型 ## __proto__ 构造器是中转站,一头是对象,一头是原型对象 __proto__实际上是某个实体对象的属性; prototype是属于构造器函数的属性。 # 扩展内建对象 通过内建构造函数的prototype增加方法; 💗如果想要通过原型为某个对象添加一个新属性,务必先检查一下该属性是否已经存在。 ``` if(!String.prototype.reverse){ String.prototype.reverse = function(){...} } ``` ## 原型陷阱 💗当我们重写某对象的prototype时,重置相应的constructor属性! ``` Dog.prototype = {k:v}; Dog.prototype.constructor = Dog; ```