原型链

作者: Christoles | 来源:发表于2019-02-27 23:35 被阅读0次

    1. 什么是原型链?

    原型链:
      当我们需要调用一个变量的时候,那么JS会给我们提供一个搜索机制,从当前的作用域范围内进行查询;
      如果没有,则继续往上查询,直到查出来为止;
      如果全局作用域内都没有这个变量的时候,就结束查找;
      像这样当前作用域内往全局作用域一层一层往上查找形成的链,我们称为原型链(也称为作用域链)

    • proto:我们可以通过这个原型链找来到对象的父级
      • 语法:proto前后各2个下划线_ 即:.proto
    • 注意:通过实例化对象来查找其父级不会找function这一级。

    2. 运用 --- 检查数组类型

    • Object.prototype.toString.call(arr)
      • arr:表示你需要检测的变量。
    var arr4 = new Array();
    
    console.log(Object.prototype.toString.call(arr4));//[object Array]
    console.log(arr4.prototype);//undefined  --- 说明原型没有这个方法
    
    console.log(arr4.__proto__);//[skill1: ƒ... 获取到实例化对象的构造函数   
    console.log(arr4.__proto__.__proto__);//{constructor: ƒ... 获取到实例化对象的构造函数的父级(对象)。 
    console.log(arr4.__proto__.__proto__);//null  --- 说明所有东西都是从无到有的 
    
    console.log(Array.__proto__);//ƒ () { [native code] }
    

    3. 运用 --- 查找父级

    //原型链 查找
        //函数
            function fun(){
                return 1;
            }
            console.log(fun.__proto__);//function
            console.log(fun.__proto__.__proto__);//{constructor: ƒ...
        //数值
            var num = new Number();
            console.log(num.__proto__)//Number {...
            console.log(num.__proto__.__proto__)//{constructor: ƒ...
            console.log(num.__proto__.__proto__.__proto__)//null  
        //数组        
            var arr6 = [1,2,3];
            console.log(arr6.__proto__);//[skill1: ƒ...
    

    4. 运用 --- 属性改造

    属性:

    • 1、constructor : 返回对创建此对象的数组函数的引用。(即 --- 获取到实例化对象的构造函数)
    • 2、prototype : 使你有能力向对象添加属性和方法;( 注:只有构造函数才有这个属性,实例化对象是没有的!) ***
    var arr3 = new Array(5);
        console.log(arr3);//[empty × 5] --- 长度为5的空数组
        console.log(arr3[2]);//undefined
    
    //constructor           
    console.log(arr3.constructor);//ƒ Array() { [native code] }
    
                //测试arr4能否调用arr3的方法         
                arr3.skill = function(){
                    console.log("hello world!")
                }
                arr3.skill();//hello world!     
                var arr4 = new Array();
                //arr4.skill();// arr4不能调用arr3的方法 ---> 报错 
    
    //prototype         
    Array.prototype.skill1 = function(){
        console.log("人啊!!!");
    }
    //通过prototype改造函数后,再调用方法,两个实例化对象都可以打印出来。
    arr3.skill1();//人啊!!!
    arr4.skill1();//人啊!!!
    

    1.神话传说

    image.png image.png

    相关文章

      网友评论

          本文标题:原型链

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