原型链

作者: Grayly吖 | 来源:发表于2019-06-25 13:27 被阅读0次

一、原型(是个对象)

  • 自定义构造函数(构造器)
    // 自定义构造函数(构造器)
    function MadeCat(name, age, addr) {
        this.name = name;
        this.age = age;
        this.addr = addr;
    }
  • (2)访问方式一、构造器中包含prototype,可以通过构造函数的prototype来访问原型
    // 访问方式1: 通过构造函数的prototype访问
    var p = MadeCat.prototype;
    console.log('MadeCat的原型是', p);
  • (3)访问方式二、实例中包含 __proto__,可以通过实例的 __proto__来访问原型
    • 通过同一个构造函数创建出来的对象(实例)都指向同一个原型
    var p1 = cat.__proto__;
    var p2 = cat2.__proto__;
    console.log(p1 === p2);  //true
  • (4)原型对象中又包含constructor,它又指向构造器,可以通过原型中的constructor来访问构造器

二、在原型上定义的属性和方法

  • 在原型上定义的属性和方法,创建出来的实例也会拥有原型上的属性和方法
  • 实例上有属性就用实例的属性,实例上没有就去找原型上的属性,原型上没有就去找原型的原型(原型链终极)上的属性
    // 自定义构造函数(构造器)
    function MadeCat(name, age, addr) {
        this.name = name;
        this.age = age;
        this.addr = addr;
    }

    //1、在原型上定义属性和方法
    MadeCat.prototype.color = '白色';
    MadeCat.prototype.call = function () {
        console.log('咩,咩,咩');
    }

    //2、创建出来的实例也会拥有原型上的属性和方法
    var cat = new MadeCat('咖菲猫', 2, '美国');
    console.log(cat); //实例
    console.log(cat.color);
    cat.call();
实例也拥有原型上的属性和方法

三、数组、日期、正则都属于对象(万物皆为对象)

  • 原型链终极例子:(数组、日期)的原型的原型如下:
        var arr = new Array();
        var date = new Date();
        console.log(arr.__proto__.__proto__ === Object.prototype);  //true
        console.log(date.__proto__.__proto__ === Object.prototype); // true

四、原型链

  • 在JavaScript中万物都是对象,对象和对象之间也有关系,并不是孤立存在的。对象之间的继承关系,在JavaScript中是通过prototype对象指向父类对象(原型),再通过__proto__指向Object对象为止,这样就形成了一个原型指向的链条,专业术语称之为原型链
    原型链图解1
原型链图解2

小试牛刀

        var F = function () { };
        Object.prototype.a = function () {
            console.log("aa");
        };
        Function.prototype.b = function () {
            console.log("bb");
        };
        var f = new F();
        F.a();
        F.b();
        f.a();

答案:aa bb aa 报错

        function A() {
            this.name = 'a'
            this.color = ['green', 'yellow']
        }
        function B() {
        }
        B.prototype = new A()
        var b1 = new B()
        var b2 = new B()

        b1.name = 'change'
        b1.color.push('black')
        console.log(b2.name)   
        console.log(b2.color)  

答案: a , ['green', 'yellow','black']

相关文章

  • 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/hebzqctx.html