当前位置: 首页 > Web前端 > vue.js

原型链的发展设计思路与常规应用方式初探

时间:2023-04-01 11:27:25 vue.js

初步研究原型链开发设计思路和常规应用方法0.9版本浏览器,该版本浏览器只能用于浏览,不具备与访问者交互的能力。Netscape迫切需要一种网页脚本语言,可以让浏览器与网页进行交互。简单的设计工程师BrendanEich负责开发这种新语言。他认为没有必要设计非常复杂的语言。这种语言执行一些简单的操作就足够了,例如判断用户是否填写了表单。一切皆对象1994年是面向对象编程最繁荣的时期,C++是当时最流行的语言,第二年Java语言1.0版本即将推出,Sun蓄势待发。BrendanEich无疑受到了影响。Javascript中的所有数据类型都是对象(object)继承,没有类。如果真的是简单的脚本语言,就不需要“继承”机制了。但是,Javascript充满了对象,必须有一种机制将所有对象连接起来。因此,BrendanEich最终设计了“继承”。考虑不引入类,因为一旦有了“类”,Javascript就是一门完整的面向对象的编程语言,显得有些过于正式,增加了初学者的难度(类重点是在ES2015/ES6中引入的话,不过那只是语法糖,JavaScript仍然基于原型)原型和构造函数BrendanEich将新命令引入Javascript以从原型对象生成实例对象。C++和Java在使用new命令时,会调用“类”的构造函数。他做了一个简化的设计。在Javascript语言中,new命令后跟的不是一个类,而是一个构造函数。new运算符的缺点是不能共享属性和方法。每个实例对象都有自己的属性和方法副本。这样不仅无法实现数据共享,而且是资源的极大浪费。prototype属性的引入为了解决new的缺点,BrendanEich决定为constructor设置一个prototype属性。该属性包含一个对象(以下简称“原型对象”)。所有需要被实例对象共享的属性和方法都放在这个对象中;那些不需要共享的属性和方法放在构造函数中。一旦创建了实例对象,它就会自动引用原型对象的属性和方法。也就是说,实例对象的属性和方法分为两种,一种是本地的,一种是引用的。原理继承和链式查找说到继承,JavaScript只有一种结构:对象。每个实例对象(object)都有一个私有属性(称为proto)指向其构造函数的原型对象(prototype)。原型对象也有自己的原型对象(proto),层层叠叠直到某个对象的原型对象为null。根据定义,null没有原型,充当此原型链中的最后一环。JavaScript中几乎所有的对象都是原型链顶端的Object的实例。构造函数、原型对象、实例。每个构造函数都有一个原型对象。原型对象包含一个指向构造函数的指针,实例包含一个指向原型对象内部指针原理的边界理解原型是干什么的。原型是在多个对象之间共享一些共同的特征(属性或方法)。最顶层的原型对象是Object.prototype,存放最常用的对象。方法,例如toString、valueOf、hasOwnProperty等,所以我们可以在任何对象中使用这些方法。它们都是平等的,除了用于创建对象时,调用函数的方法不同)属性遮蔽(propertyshadowing)对象本身的属性将首先访问原型链上的同名属性,对于例子:o.b,b是o自己的属性?是的,原型上还有一个“b”属性,但不会被访问。this指向调用继承函数时,this指向当前继承的对象,而不是继承函数所在的原型对象。请注意,闭包和箭头函数在JavaScript中创建非复制对象。没有复制。对象的原型实际上就是一个对象,它完全独立于对象本身。不复制对象的属性。相反,JavaScript只是在两个对象之间建立了一种关联,使一个对象可以通过委托访问另一个对象的属性和功能,所以与其说是继承,不如说是委托更准确。.关键属性介绍prototype每个构造函数都有一个原型prototype对象prototype是一个只针对函数的属性。构造函数创建的实例对象的[[Prototype]]指向func的prototype属性。Object.prototype属性表示Object的原型对象。默认情况下,新函数创建的对象的原型指向该函数的原型属性。proto和getPrototypeOf+setPrototypeOf每个对象都有一个__proto__属性,指向它的prototype原型对象someObject.[[Prototype]]符号用来指向someObject的原型。从ECMAScript6开始,可以通过Object.getPrototypeOf()和Object.setPrototypeOf()访问器访问[[Prototype]]。这相当于JavaScript的非标准但许多浏览器实现的属性__proto__。__proto__属性指向问题字面量创建的对象:vara={}指向:obj.__proto__===Object.prototype;a.__proto__===a.constructor.prototype构造函数创建方式:varA=function();vara=newA()指向:a.__proto__===A.prototype;a.__proto__===a.constructor.prototypeObject.create创建:vara1={}vara2=Object.create(a1)指向:a2.__proto__===a1;a.__proto__!==a.constructor.prototypeprototype和__proto__prototype是函数才有的属性。__proto__是每个对象都有的属性,但它不是规范属性,只是它的一部分浏览器实现了,标准属性是someObject.[[Prototype]]constructor原型对象上默认有一个属性constructor,这也是指向其关联构造函数的指针。原型对象中的构造函数指向构造函数本身hasOwnProperty和Object.keys()是JavaScript中仅有的两个处理属性且不遍历原型链的方法。边界情况对于JavaScript中的内置对象,如String、Number、Array、Object、Function等,因为它们是通过原生代码实现的,所以它们的原型被打印为?(){[nativecode]}Built-inobjects本质上是函数,因此可以通过它们创建对象。创建的对象的原型指向对应内置对象的prototype属性,最顶层的原型对象仍然指向Object.prototype。Object.create(null)创建的对象没有原型。Object.create(null).__proto__==undefined创建对象的方法1、字面量方法,varobj={};通过字面量方法创建对象时,其原型为Object.prototype。虽然我们不能直接访问内置属性[[Prototype]],但我们可以通过Object.getPrototypeOf()或对象的__proto__来获取对象的原型。Object.getPrototypeOf(obj)===Object.prototype;obj.__proto__===对象.原型;2.函数的构造调用,varobj=newf();javaScript定义一个函数的同时设置了一个默认的prototype属性,所有共享的属性或方法都放在这个属性指向的对象中。函数构造调用创建的对象的原型就是这个函数的原型所指向的对象。obj.__proto__===f.prototype3.Object.create(),varobj2=Object.create(obj);这个方法会使用你传入的对象作为创建对象的原型。该方法还可以模拟对象的“继承”行为。obj2.__proto__===对象;application实现继承构造函数的继承1.构造函数绑定,使用call或apply方法将父对象的构造函数绑定到子对象上,即在子对象的构造函数中添加一行:Animal.apply(this,参数);2.原型模式,“猫”的原型对象,指向Animal的一个实例;【注意力!!!如果原型对象被替换,那么下一步必须为新的原型对象添加一个构造函数属性,并将这个属性指向原来的构造函数。否则容易造成原型链紊乱】Cat.prototype=newAnimal(); Cat.prototype.constructor=Cat;3、改进原型模式,让Cat()跳过Animal(),直接继承Animal.prototype;猫.prototype=Animal.prototype;Cat.prototype.constructor=猫;优点是效率比较高(不需要执行创建Animal的实例),节省内存。缺点是Cat.prototype和Animal.prototype现在指向同一个对象,所以对Cat.prototype的任何修改都会反映在Animal.prototype中。4.使用空对象作为中介varF=function(){};F.prototype=Animal.prototype;Cat.prototype=newF();Cat.prototype.constructor=猫;F是一个空对象,几乎不占用内存。这时候修改Cat的原型对象不会影响到Animal的原型对象。5.复制继承,将父对象的所有属性和方法复制到子对象中functionextend2(Child,Parent){varp=Parent.prototype;varc=Child.prototype;for(variinp){c[i]=p[i];}c.uber=p;}非构造函数继承object()方法,使用原型链functionobject(o){functionF(){}F.prototype=o;返回新的F();}将子对象的prototype属性指向父对象,这样子对象和父对象连接在一起进行浅拷贝,父对象的所有属性都拷贝到子对象中,继承深拷贝可以也实现了,递归调用”“浅拷贝”属性方法vue.prototype.xxx的全局作用域如何体现prototype-plugin机制的扩展性JQ/zepto认为为什么要把prototype方法放在$.fn中?:Extensionplugin.(首先,构造函数的原型必须指向一个可以扩展的对象;其次,$.fn必须指向一个可以扩展的对象)优点:1、只有$会暴露给window全局变量2、统一插件扩展名$.fn.xxx这个接口方便使用instanceOf遍历原型链查找是否是某个原型对象的实例,这个this指向问题,当一个继承的函数是称为,这指向当前继承的对象,而不是继承的函数。原型对象。注意闭包和箭头函数类中的this点是绑定改变this点的,返回一个函数通过原型链获取一些特殊方法实现拼接参数思路:通过构造函数获取特殊方法实现拼接参数+applyArray.prototype。slice.call(参数);call/applynew//new后面跟构造函数的new操作符及工作原理1、创建一个新对象,它继承自func.prototype(构造函数的原型对象)2、构造函数func是Execute,执行时,对应将传入参数,并将上下文(this)指定为thisnew实例3,如果构造函数返回一个“对象”,那么这个对象将替换整个new的结果,如果构造函数不返回对象,那么new的结果就是第1步创建的对象原始类型的发散思维:下面两种写法vara=1;有什么区别?一个.__原型__;a.constructor1.__proto__???在JavaScript中将对象转换为原始值的步骤https://blog.csdn.net/u010533180/article/details/54427200参考链接【手工精修】https://github.com/mqyqingfeng/Blog【手动细化】https://github.com/mqyqingfeng/Blog/issues/2https://developer.mozilla.org...http://www.ruanyifeng.com/blo...https://zhuanlan.zhihu.com/p/。..https://zhuanlan.zhihu.com/p/...https://www.cnblogs.com/liyus...https://www.cnblogs.com/sarah...https://segmentfault.com/a/11...【作者:360手机助手团队-XTeam】原创不易,如需转载请【联系作者】或【署名作者并注明出处】文章】