原型链

作者: 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

相关文章

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

  • 原型、原型链

    (什么是原型、原型链?有什么作用) JavaScirpt深入之从原型到原型链 图解 Javascript 原型链 ...

  • 原型链&查找规则&作用域链

    原型链(隐式原型链) 属性的查找规则(原型链的查找规则) 作用域链

  • 关于原型原型链的理解

    什么是原型? 什么是原型链? 为什么需要原型,和原型链?

  • 原型链实现继承

    原型链 原型链示意图 使用原型链实现继承 这是怎么回事呢? 原型链在哪? 听我细细道来~ 首先 Teacher 实...

  • 继承

    原型链直接继承 原型链直接继承prototype 原型链继承_prototype属性 继承_构造函数绑定

  • js中的实现继承的几种方式

    大纲:原型链借用构造函数组合继承原型式继承寄生式继承寄生组合式继承 1、原型链: 什么是原型链? 原型链的基本思想...

  • 【原型和原型链】什么是原型和原型链

    【原型和原型链】什么是原型和原型链https://blog.csdn.net/xiaoermingn/articl...

  • js原型链

    目录 1.对象的原型和原型链1.1什么是原型1.2查看原型1.3对象的原型链 2.使用构造函数2.1 函数的原型链...

  • 廖雪峰JS小记

    (function(){})() 原型,原型链 浅谈Js原型的理解JS 原型与原型链终极详解 对象 对象:一种无序...

网友评论

      本文标题:原型链

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