js学习总结----深入扩展原型链模式常用的六种继承方式

一、可枚举和不可枚举

for in 循环在遍历的时候,默认的话可以把自己私有的和它所属类原型上的扩展的属性和方法都可以遍历到,但是一般情况下,我们遍历一个对象只需要遍历私有的即可,我们可以使用以下的判断进行处理。obj.propertyIsEnumerable(key) 或者obj.hasOwnProperty(key)

二、Object.create(proObj)

  方法创建一个新的对象,但是要把proObj作为这个对象的原型 在IE6-8不兼容(ECMAscript5)

  原理:

     function object(o){
            function Fn(){};
            Fn.prototype = o;
            return new Fn;
        }

三、继承

  1、原型继承    

     function A(){
            this.x = 100;
        }
        A.prototype.getX = function(){
            console.log(this.x);
        }
        function B(){
            this.y = 200
        }
        B.prototype = new A;     B.prototype.constructor = B

  原型继承是我们JS中最常用的一种继承方式

  子类B想要继承父类A中的所有属性和方法(公有+私有),只需要让B.prototype = new A;即可

  原型继承的特点:它是把父类中私有+公有的都继承到了子类原型上(子类公有的),具体见下图 

   核心:原型继承并不是把父类中的属性和方法克隆一份一模一样的给B而是让B和A之间增加了原型链的链接,以后B的实例n想要用A中的getX方法,需要一级一级的向上查找来使用。

  2、call继承

    把父类私有的属性和方法克隆一份一模一样的 作为子类私有的属性 

     function A(){
            this.x = 100;
        }
        A.prototype.getX = function(){
            console.log(this.x);
        }
        function B(){
            A.call(this)//A.call(n) 把A执行让A中的this变成n
        }

  3、冒充对象继承   

     function A(){
            this.x = 100;
        }
        A.prototype.getX = function(){
            console.log(this.x);
        }
        function B(){
            var temp = new A;
            for(var key in temp){
                this[key] = temp[key]
            }       temp = null
        }
        var n = new B;

  冒充对象继承:把父类公有的+私有的克隆一份一模一样的给子类私有的

  4、混合模式继承:原型继承+call继承(第二常用)

     function A(){
            this.x = 100;
        }
        A.prototype.getX = function(){
            console.log(this.x);
        }
        function B(){
            A.call(this);
        }
        B.prototype = new A;
        B.prototype.constructor = B;

  缺点:A执行了两遍,且A中x既是私有属性,又是公有属性

  5、寄生组合式继承:解决上面私有的重复问题

     function A(){
            this.x = 100;
        }
        A.prototype.getX = function(){
            console.log(this.x);
        }
        function B(){
            A.call(this);
        }
        B.prototype = Object.create(A.prototype);//IE6-8不兼容 ,可以自己写一个Object.create方法
        B.prototype.constructor = B;

  6、中间类继承法->不兼容(移动端开发考虑)

    A.__proto__ = B.prototype

时间: 2025-01-04 14:58:58

js学习总结----深入扩展原型链模式常用的六种继承方式的相关文章

JavaScript提高篇之面向对象之单利模式工厂模型构造函数原型链模式

1.单例模式 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>面向对象之单例模式</title> 6 </head> 7 <body> 8 9 <script type="text/javascript"> 10 //对象数据类型

JS学习之原型和原型链模式

原型链模式1.每一个对象(实例也是对象)都有一个天生自带的属性:__proto__,这个属性指向当前所属类的原型(prototype) 2.每一个函数(类也是函数)都有一个天生自带的属性:prototype(原型),并且这个属性存储的值是一个对象数据类型的数据,浏览器默认给这个属性开辟一个堆内存 在这个堆内存中存储了相关的属性和方法 1)其中constructor就是天生自带的一个属性,constructor等于当前的函数本身 2)__proto__:prototype对应的值也是一个对象数据类

JavaScript学习总结(十七)——Javascript原型链的原理

一.JavaScript原型链 ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法.其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.在JavaScript中,用 __proto__ 属性来表示一个对象的原型链.当查找一个对象的属性时,JavaScript 会向上遍历原型链,直到找到给定名称的属性为止! 比如现在有如下的代码: 扩展Object类,添加Clone和Extend方法 1 /*扩展Object类,添加Clone,JS实现克隆的方法*/ 2 Ob

JS学习笔记02-初识原型

<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style type="text/css"> </style> </head> <body> <script type="text/javascr

Js创建对象的方法及原型链的分析

一.JS创建对象的几种方式 最近在看javascript高级程序设计,其中对对象的创建做了具体的阐述,可以进行总结一下. 第1种模式:工厂方式 var sayHello=function(){ return "Hello"; }; function student(){ var S1 = new Object(); Child.name="小明"; Child.age="18"; Child.sayHello=sayHello; return s

js中的对象、原型链机制、构造函数

一.在js中创建对象的方式 //一.字面量或直接量创建对象 var obj1 = { name:"zs", age:12 }; //二.通过new来创建对象 var obj2 = new Object(); obj2.name = "zs"; obj2.age = 16; //三.通过工厂函数来创建 function creatObj() { return {}; } //四.通过new 构造函数来创建 function Obj() { } //测试 var obj

JS面向对象(2)——原型链

原型链用于ECMAScript的继承.其思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.说人话,我们知道,一个构造函数Subtype,其原型对象有一个指向构造函数的指针,这是联系构造函数和原型的桥梁,如果我让原型对象的指针指向了另一个原型,而另一个原型原本指向其构造函数的指针也指向了另一个原型,那么,这就是一个原型链了,原型上的属性会一层一层往下传递. function SuperType(){ this.property=true; } SuperType.prototype.ge

[js高手之路]从原型链开始图解继承到组合继承的产生

于javascript原型链的层层递进查找规则,以及原型对象(prototype)的共享特性,实现继承是非常简单的事情 一.把父类的实例对象赋给子类的原型对象(prototype),可以实现继承 1 function Person(){ 2 this.userName = 'ghostwu'; 3 } 4 Person.prototype.showUserName = function(){ 5 return this.userName; 6 } 7 function Teacher (){}

从零开始学 Web 之 JS 高级(二)原型链,原型的继承

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/ 在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目.现在就让我们一起进入 Web 前端学习的冒险之旅吧! 一.原型链 原型链