原型链

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

你可能感兴趣的:(原型链)