Js 原型及原型链

忘是亡心i 2022-12-07 12:20 207阅读 0赞

以下三点需要谨记

1.每个对象都具有一个名为\_\_proto\_\_的属性，字面量对象除外；

2.每个构造函数（构造函数标准为大写开头，如Function()，Object()等等JS中自带的构造函数，以及自己创建的）都具有一个名为prototype的方法（注意：既然是方法，那么就是一个对象（JS中函数同样是对象），所以prototype同样带有\_\_proto\_\_属性）；\_\_proto\_\_可以自身调用，调用语法对象，prototype可以为实例提供方法

3.每个对象的\_\_proto\_\_属性指向自身构造函数的prototype；

示例一

let obj = { }
    console.log(obj)
    //obj.__proto__ 可以直接打印出对象的原型 也可以使用console.dir(obj.__proto__)打印
    console.log(obj.__proto__)

\_\_proto\_\_就是obj的原型对象 数组也一样  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70_pic_center]  
示例二

// 字面量对象没有原型
    let hd = Object.create(null,{ 
    	name:{ 
    		value:'原型'
    	}
    })
    console.log(hd)

没有 \_ *proto* \_ ![在这里插入图片描述][20200915201146326.png_pic_center]  
示例三

let obj = { 
    		// 给自己增加一个方法
            render () { 
            console.log('我是obj对象自己的方法')
            }
        }
        // 给父亲增加一个方法
        obj.__proto__.render = function() { 
            console.log('我是obj对象的父原型方法')
        }
        console.log(obj)
        // 执行结果看下图 有两个render方法 打印了我是obj对象自己的方法 证明都有方法 会优先选择自己的方法
        obj.render()

执行结果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70_pic_center 1]  
示例四

执行结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70_pic_center 2]  
示例五

打印结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70_pic_center 3]  
完整实例及原型图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70_pic_center 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/090582f5a64840d5842bdb09bafda989.png
[20200915201146326.png_pic_center]: /images/20221123/272ec726af9d4000afd7d4292eccce8d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/5a3ee4a8c8c34db18979f93a55357edb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/16686948d0f2412192ef30d48266f4ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/ac1e8030ce224779ac7e9a18ccada26f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY0MDMyMw_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/dee92e5080e94edabe97e95c516e5e50.png