JavaScript中原型原型链数据访问机制

目录

一、定义

二、prototype

三、__proto__

四、具体的访问机制

五、实际运用 

六、代码演示及运行结果 

---

一、定义

所谓原型原型链就是JavaScript程序定义的数据的调用访问机制。

二、prototype

是每一个函数天生就有的属性，本质是一个对象，有自己的内存地址，可以存储属性属性值和函数方法。

是 每一个 函数 天生就有的属性，是 一个 公共存储空间 存储 数据数值 和 函数方法，每一个 函数 创建的对象 都可以 调用 这个 公共空间中存储的数据 和 函数方法。

三、__proto__

是每一个对象天生就有的属性，指向生成这个对象函数的prototype，可以简单粗暴地理解为对象的__proto__存储的是生成这个对象的函数的prototype的内存地址，对象就可以通过__proto__指向生成这个对象的函数prototype也就是调用其中的数据数值。

四、具体的访问机制

（1）如果对象有对应的属性或者函数方法就访问调用对象的属性和函数方法。

（2）如果对象没有对应的属性或者函数方法就自动调用prototype存储的数据或者函数方法。

（3）如果要直接调用函数prototype中的数据语法是对象.__proto__.属性 / 对象.__proto__.函数方法()。

五、实际运用 

函数中通过this定义对象的属性和属性值，每一个对象属性存储的属性值都可能不同，每一个对象要对应不同的数据数值。

通过函数的prototype定义对象要调用的函数方法，对象调用的函数方法是相同的，定义在 函数的prototype 中，每一个对象都可以通过原型原型链的访问机制调用函数prototype中存储的函数方法，也就是 函数prototype中定义一次所有的对象都可以调用。

本质就是对象存储数据，调用函数prototype中存储的函数方法。 

六、代码演示及运行结果 

6.1  prototype属性

 // 创建一个函数
        function fun(){
            // 定义给 通过 new 调用 创建的对象 属性属性值
            this.name = '李四' ;
            this.age = 180 ;
            this.sex = '女' ;
            this.addr = '北京';
        }

        // 每一个 函数 天生 就有一个 prototype属性
        // 可以 定义存储 属性属性值 和 函数方法 

        // 在 prototype 中 定义属性和属性值
        fun.prototype.name = '张三' ;
        fun.prototype.age = 18 ;
        fun.prototype.sex = '男' ;
        fun.prototype.phone = 123456 ;

        // 在 prototype 中 定义函数方法
        fun.prototype.fun1 = function(){ console.log(111) } ;
        fun.prototype.fun2 = function(){ console.log(222) } ;
        fun.prototype.fun3 = function(){ console.log(333) } ;

        // // 和new一起调用创建 对象 
        const obj = new fun();

        console.log( obj );


        // 通过 对象.属性 或者 对象.函数() 调用 函数fun的属性prototype 中 存储的数据和函数方法
        console.log( obj.name );
        console.log( obj.age );
        console.log( obj.sex );
        obj.fun1();
        obj.fun2();
        obj.fun3();

运行结果：

6.2  访问机制 

        // 创建一个函数
        function fun(){
            // 定义给 通过 new 调用 创建的对象 属性属性值
            this.name = '李四' ;
            this.age = 180 ;
            this.sex = '女' ;
            this.addr = '北京';
        }

        // 每一个 函数 天生 就有一个 prototype属性
        // 可以 定义存储 属性属性值 和 函数方法 

        // 在 prototype 中 定义属性和属性值
        fun.prototype.name = '张三' ;
        fun.prototype.age = 18 ;
        fun.prototype.sex = '男' ;
        fun.prototype.phone = 123456 ;

        // 在 prototype 中 定义函数方法
        fun.prototype.fun1 = function(){ console.log(111) } ;
        fun.prototype.fun2 = function(){ console.log(222) } ;
        fun.prototype.fun3 = function(){ console.log(333) } ;

        // // 和new一起调用创建 对象 
        const obj = new fun();


        // 访问机制

        // 1, 对象有的调用对象自己的
        console.log( obj.name );
        console.log( obj.age );
        console.log( obj.sex );

        // 2, 对象没有 自动 调用函数prototype 中的数据
        console.log( obj.phone );
        obj.fun1();

        // 3, 对象.__proto__.属性 / 对象.__proto__.函数方法() 
        // 直接调用 函数prototype中的数据
        console.log( obj.__proto__.name );

 运行结果：