原型继承+原型链 + 对象继承发展

一、原型继承:

  1、说起原型继承,就要先由构造函数创造对象说起,首先了解构造函数内部基本原理:

      (1).在函数体最前面隐式的加上this = {}

      (2).执行 this.xxx = xxx;

      (3).隐式的返回this

    并且要注意隐士创建的this对象中有个名为__proto__的属性,其属性值为该构造函数继承的原型prototype。

    而原型对象的有一个名为constructor的属性,其属性值为继承之的构造函数,

    所以可以通过这两个属性相互查看

  2.原型的定义及一些特点:

    a.定义:原型是function对象的一个属性,它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象,可以继承该原型的属性和方法。原型也是对象。

    b.利用原型特点和概念,可以提取共有属性。

    c.对象如何查看原型 — > 隐式属性 __proto__

    d.对象如何查看对象的构造函数 — > constructor

  3、若一个构造函数没有指定其原型,则其原型默认为Object.prototype

二、原型链:

  1.原型的形成,最好的解释就是代码了,看如下代码即可

  

A.protorype = {
        name: ‘a‘
    }
    function A() (
        this.name = ‘A‘;
    )
    B.prototype = new A();
    function B() {
        this.name = ‘B‘;
    }
    C.prototype = new B();
    function C(){
        this.name = ‘C‘;
    }
    C继承B,B继承A,形成C->B->A的一条以原型为继承方式的原型链

  2、原型链上属性的增删改查:

    (1)查:优先去实例对象上寻找是否有该属性,若没有,则再去其对应的原型上去寻找该属性,若都没有,则返回undefined

    (2)增:直接给实例对象增添属性,则仅仅在实例对象上增添属性,若在原型上增添属性,则在原型上增添属属性,则在原型上增添属性,其实例继承原型增添的属性。

    (3)删:delete仅仅能删除实例对象的属性,即构造函数原有的自己的属性和后来实例对象增添的属性,还有关于delete的一点需注意,delete无法删除原型的属性和用var定义的变量(即非window的属性)

    (4)改:更改实例对象的属性,则仅仅更改实例对象的属性值;更改原型的属性值,则更改原型的属性值,继承该原型的对象对应属性值也会被更改;

三、对象继承的发展:

  1、传统模式:即正常的通过构造函数创建实例对象,来继承原型

    缺点:继承了过多不必要的属性

  2、借用其他构造函数(即通过call / apply来改变构造函数内this对象的引用)

    缺点:无法继承借用构造函数的原型

    

  A.prototype = {
        name: ‘a‘,
        age: 18,
        class: 1
    }
    function A(){
        this.name = ‘A‘;
    }
    function B(){
        A.call(this);
    }
    var b = new B();
    console.log(b.name); // A
    console.log(b.age) // undefined

  3、共享原型:即将其他构造函数的原型直接赋值给本构造函数的原型

    缺点:两个原型会想回影响,更改其中一个原型,更一个对应的原型也会被更改。

  

  A.prototype = {
        name: ‘a‘,
        age: 18,
        class: 1
    }
    function A(){
        this.name = ‘A‘;
    }
    B.prototype = A.prototype;
    function B(){
        this.name = ‘B‘;
    }
    var a = new A();
    var b = new B();
    console.log(a.age); // 18
    console.log(b.age); //18
    // 原型继承成功
    B.prototype.age = 20; //更改其中一个原型的age属性
    console.log(a.age);//20
    console.log(a.age); //20
    // 两个原型相互影响

  4、圣杯模式:

    (1)正常函数形式:

    

  function inherit (Child, Parent) {
        // 借用F这个中间量来继承,而不是直接共享原型
        var F = function (){}
        F.prototype = Parent.prototype;
        Child.prototype = new F();
        // 自定义构造函数原型时,同时要更正自定义原型的constructor,否则一般默认为Object(),次函数若不指定constructor,则constructor为Parent
        Child.prototype.constructor = Child; 

        Child.prototype.uber = Parent; //记录真正继承的是谁
    }

    (2)闭包形式:

    

    var inherit = (function(){
        var F = function (){};
        return function (Child, Parent) {
            F.prototype = Parent.prototype;
            Child.prototype = new F();
            Child.prototype.constructor = Child;
            Child.prototype.uber = Parent;
        }
    })();
时间: 2024-10-14 04:18:12

原型继承+原型链 + 对象继承发展的相关文章

1、AJAX里面status的值代表什么 2、get post 的区别 3、怎样把对象转化成字符串 4、闭包、继承、原型、原型链 5 、http传输协议 6、arguments是什么

1.AJAX里面status的值代表什么     在JavaScript里面写AJax的时,最关键的一步是对XMLHttpRequest对象建立监听,即使用"onreadystatechange"方法.监听的时候,要对XMLHttpRequest对象的请求状态进行判断,通常是判断readyState的值为4且status的值为200或者304时执行我们需要的操作.以下记录了一些常用readState以及status的值及其含义 readyState 属性表示Ajax请求的当前状态.它的

原型、原型对象的理解 及其原型链继承

在 ES5 中,有的人可能对原型,原型对象,及其原型链不是很清楚,今天我就说说对这些的深入认识下.(如果有什么不懂得欢迎留言探讨,当然如果有什么写的不恰当的也希望大家留言备注.) 首先,再说原型与原型对象之前,当然有必要清楚构造函数,实例,原型与原型对象之间的关系.其实他们的关系也很简单. 构造函数,实例,原型与原型对象之间的关系: 构造函数有它自己的属性及其方法,其中包括自己定义的属性和方法外,还有两个特殊属性(prototype.constructor):而每个他的实例都会拥有它的所有属性和

原型,原型对象,原型链,构造函数,继承(一)

前言:javascript中 万物皆对象 , 但是对象是有区别的 分为普通对象(object)和函数对象(function): ①由以下三种形式创建的对象为函数对象: function fun1(){} var fun2 = function(){} var fun3 = new Function(); console.log(typeof fun1);//function console.log(typeof fun2);//function console.log(typeof fun3);

关于对象、构造函数、原型、原型链、继承

对象: 在传统的面向过程的程序设计中,会造成函数或变量的冗余.而js中对象的目的是将所有的具有相同属性或行为的代码整合到一起,形成一个集合,这样就会方便管理,例如: var person1={ name:"memphis", age:26, showMessage:function(){ alert("name:"+this.name); } }; person1.showMessage();//输出name:memphis 以上的例子将name.age.showM

一步步学习javascript基础篇(5):面向对象设计之对象继承(原型链继承)

上一篇介绍了对象创建的几种基本方式,今天我们看分析下对象的继承. 一.原型链继承 1.通过设置prototype指向“父类”的实例来实现继承. function Obj1() { this.name1 = "张三"; } function Obj2() { } Obj2.prototype = new Obj1(); var t2 = new Obj2(); alert(t2.name1); 这里有个明显的缺点就是:(如果父类的属性是引用类型,那么我们在对象实例修改属性的时候会把原型中

JS对象继承与原型链

1.以复制方式实现的继承 1.1浅拷贝 基本类型的复制 1 var parent = { 2 lanage: "chinese" 3 } 4 5 var child = { 6 name: "xxx", 7 age: 12 8 } 9 10 function extend(parent, child) { 11 var child = child || {}; 12 for (const propertype in parent) { 13 child[proper

Js中的对象、构造函数、原型、原型链及继承

1.对象 在传统的面向过程的程序设计中,会造成函数或变量的冗余.而JS中对象的目的是将所有的具有相同属性或行为的代码整合到一起,形成一个集合,这样就会方便我们管理,例如: var person1={    name:"tan",    age:26,    showMessage:function(){        alert("name:"+this.name);    }};person.showMessage();//输出name:tan 以上的例子将nam

面向对象、原型链、继承知识梳理

单例模式:就是一个对象咯 var person={ name:'xuwen', age:17 }; var person2={ name:'xiaoxu', age:25 } 工厂模式:就是一个函数,解决批量生产问题 1 function fn(name,age){ 2 var obj={}; 3 obj.name=name, 4 obj.age=age, 5 obj.write=function(){ 6 console.log(obj.name); 7 } 8 return obj; 9 }

JavaScript核心-继承-原型链

继承是面向对象的编程的一大特性,很多OO语言都支持两种继承方式:接口继承和实现继承.在ECMAScript中,由于函数没有签名,所以无法实现接口继承,只有实现继承. 实现继承主要是依靠原型链来实现的. 简单回顾一下构造函数.原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而对象的每个实例都有一个指向原型对象的内部指针. 再回顾一下原型对象的用途:用途是包含可以由特定类型的所有实例共享的属性和方法. 原型对象也是一个简单的对象,如果我们让一个原型对象等于另一个