美文网首页
js进阶--原型

js进阶--原型

作者: caiminghan | 来源:发表于2018-12-09 01:04 被阅读0次

    对象

    对于js中的对象,新手的第一反应应该是用{}包起来的键值对,在jquery中我们可以称这种类型的对象为纯对象,即可通过$.isPlainObject()方法来判断是否为纯对象。但其实function,array也属于对象,我们可以认为所有的引用类型都为对象
    这样看来,对象可能由函数Object()、Function()、Array()或者自定义的构造函数创建,所以 所有的对象,都由函数创建

    原型

    前端的新朋友应该对原型都不熟,所有的函数被创建下来,就带有prototype这个属性,我们称这个属性为函数的原型。函数的原型是一个纯对象,默认都有一个属性constructor,指向这个函数自己,即:

    var func = function() { console.log('test') };
    func === func.prototype.constructor // true
    

    隐式原型

    所有函数都具有原型,而对于所有对象,在创建下来,就带有_proto_这个属性,称之为隐式原型。对象的隐式原型_proto_指向创建该对象的函数的prototype,即

    function Test(){}
    var obj = new Test()
    obj._proto_ === Test.prototype // true
    

    那么Test.prototype也是一个对象,按照上述,它的_proto_应该指向Object.prototype,即:

    Test.prototype._proto_ === Object.prototype // true
    

    此时你会发现,Object.prototype又是一个对象,那也具有隐式原型,讲道理应该也和上面一样,指向Object.prototype,但是这样不就无限循环了吗。所有Object._proto_比较特殊,它指向的是`null``,即:

    Object._proto_ === null
    

    原型链

    仔细看了上述原型和隐式原型的朋友们,对于对象的原型应该有了进一步的了解。那原型链,又是什么呢?我们先看一下一个简单的例子:

    var arr = [1, 2]
    arr.toString() === "1,2" // true
    

    toString()是我们在数组处理中经常使用的方法,但是这个数组arr,哪里来的toString()方法呢?我们打开它的隐式原型看看:

    在控制台打印arr.png
    可以发现,arr._proto_中有toString这个属性,这个属性从Array.prototype来。当访问一个对象的属性时,会先在基本属性中查找,如果没有,再沿着__proto__这条链往下找,这就是原型链
    对于所有的对象,沿着原型链最后会找到Object.prototype,因此所有的对象都会有Object.prototype的方法。这就是所谓的“继承”。对于“继承”的对象,我们可以通过Object.hasOwnProperty判断对象的属性是否是基本属性,这经常使用对象的for in遍历中。
    原型是js中十分重要的知识点,学习原型也是前端开发者js能力进阶的必经之路。

    相关文章

      网友评论

          本文标题:js进阶--原型

          本文链接:https://www.haomeiwen.com/subject/pokucqtx.html