前端面试 JavaScript篇 数据访问机制__原型原型链

45 阅读2分钟

JavaScript数据访问机制/访问原理 原型原型链

prototype

原型/原型对象

是 每一个 `函数` 天生就有的属性
本质是一个`对象` 可以存储数据
构造函数创建的实例化对象 都可以访问 

__proto__

原型属性

是 每一个 `对象` 天生就有的属性
本质是一个`对象` 指针指向 构造函数的prototype
每一个实例化对象的 __proto__ 指向 构造函数的prototype

可以理解成 实例化对象的__proto__ 就是 构造函数的prototype

对象中数据的访问机制

获取数据的语法

按照对象的属性 获取数据

对象.属性
对象['属性']

调用

对象自己有这个属性 直接调用对象自己的这个属性
对象自己没有这个属性 自动去 对象的__proto__ 也就是 构造函数的prototype 调用数据 
如果都没有 调用结果是 undefined

如果想直接调用 对象的__proto__ 也就是 构造函数的prototype 的数据 
语法是 对象.__proto__.属性 对象.__proto__['属性']

实际项目中 构造函数的prototype不会存储属性和属性值 只会存储函数方法

        // 构造函数
        function Fun( name , age ){
            // 给实例化对象设定的属性
            this.name = name ;
            this.age = age ;
        }

        // 构造函数 prototype 设定存储的数据
        Fun.prototype.sex = '男' ;
        Fun.prototype.addr = '北京' ;

        Fun.prototype.name = '李四' ;


        // 实例化对象
        const obj = new Fun( '张三' , 18 );
        console.log( obj );

        // 对象的调用原则 

        // 自己有调用自己的
        // 对象name存储张三
        // 构造函数prototype,name存储李四
        // 对象自己有name属性 调用自己的 张三
        console.log( obj.name );

        // 自己没有自动调用 构造函数prototype中的
        // 对象没有sex属性
        // 自动 调用 对象中__proto__ 也就是 构造函数prototype中存储的sex对应的数据
        console.log( obj.sex );

        // 都没有这个属性 调用结果是 undefined
        console.log( obj.aaa );

        // 通过 对象中的__proto__ 可以直接调用 构造函数prototype中存储的数据数值
        console.log( obj.__proto__.name );