全面理解JavaScript中的继承(必看)

JavaScript中我们可以借助原型实现继承。

例如

function baz(){
this.oo="";
}

function foo(){

}
foo.prototype=new baz();
var myFoo=new foo();
myFoo.oo;

这样我们就可以访问到baz里的属性oo啦。在实际使用中这个样不行滴，由于原型的共享特点（数据保存在了堆上），

所有实例都使用一个原型，一但baz的属性有引用类型就悲剧了，一个实例修改了其他实例也都跟着变了...wuwuwu

自然就有了组合式继承

function baz(){
this.oo="";
}
baz.prototype.xx=function(){

}

function foo(){
baz.call(this);//第二次调用
}
foo.prototype=new baz();//第一次调用
var myFoo=new foo();
myFoo.oo;
myFoo.xx;

这样就会有一个问题，代码里也表明出来了，baz会被调用两次，身为处女座的怎么可以允许呢..

插一句，第二种方式就不用出现第一种方式的问题吗？答案是不会的。

原因是属性的查找是先从对象自身开始，没找到才会去原型中去找，call时就把属性给继承了。

再插一句，那这样只使用call继承不就行了吗？如果不使用原型这个是可行的，但是作为处女座怎么能不使用原型呢，

在原型上方法是共享的，这样性能就好了很多呀。

寄生组合式继承

__extends=function (p,c){
function ctor(){
this.constructor=c;//赋值构造函数
}
ctor.prototype=p.prototype;
c.prototype=new ctor();
}

function baz(){
this.oo=[1];
}
baz.prototype.xx=function(){

}
__extends(baz,foo);
function foo(){
baz.call(this);
}
var myFoo=new foo();
myFoo.oo;
myFoo.xx;

这样不但解决了两次调用的问题，还解决了对象调用构造函数时调用的是真实的创建对象的函数而不是原型链上其他的构造函数。

代码里有表明。

构造函数是原型对象上的一个属性，是对象的创建者。由于我们的原型属性被从新赋值了所以构造函数时继承来的。

这里要说一下，对象是怎样创建，也就是new都干了些什么。

例如：

var a=new b();

其实是这样的，a={};创建了一个给a,然后b.call(a);call里初始化a,在call之前还有一步，就是a的内部原型对象

设置为b的原型属性指向的原型对象。原型上有构造函数属性，构造函数用来创建对象分配内存控件。

大概就这些...看看时间也不早了，碎吧，保持平和的心态切勿浮躁，努力去改变明天，希望一切都会慢慢变好。

以上就是小编为大家带来的全面理解JavaScript中的继承(必看)的全部内容了，希望大家多多支持脚步之家。

赞 (0)

相关推荐

  • 在JavaScript中模拟类(class)及类的继承关系

    Javascipt语法不支持"类"(class)[es6已经支持],但是有模拟类的方法.今天我主要谈谈Javascipt中模拟"类"的方法及js中继承的总结和回顾. js中实现"类"与继承,既是重点,又是难点.很多同学可能都对js中"类"与继承都有所了解,但是深入剖析的时候,感觉力不从心.模棱两可. 我们先来总结一下js定义"类"的几种方法: 方法一:构造函数法 这个方法是比较经典的方法,我们会经常见到.生

  • JavaScript基于原型链的继承

    JavaScript基于原型链的继承

    Javascript并不是一门面向对象的语言,没有提供传统的继承方式,但是它提供了一种原型继承的方式,利用自身提供的原型属性来实现继承. 原型链是JavaScript中继承的主要方法. 原型链的基本思想是:利用原型让一个引用类型继承另一个引用类型的属性和方法. 构造函数.原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针. 如果让原型对象等于另一个对象的实例,这样原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中

  • JS 面向对象之继承---多种组合继承详解

    这一次要讲 组合.原型式.寄生式.寄生组合式继承方式. 1. 组合继承:又叫伪经典继承,是指将原型链和借用构造函数技术组合在一块的一种继承方式. 下面来看一个例子: function SuperType(name) { this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function() { alert(this.n

  • 深入浅析javascript继承体系

    深入浅析javascript继承体系

    最近做web项目,接触了jquery等框架,虽然使用方便,但是还是想学习下Javascript,今天分享下最近对js原型继承的理解,不足之处欢迎指正. 一.构造器的原型属性与原型对象 刚接触js时通常依样画瓢,用函数new一个实例,也不知道其原因,只听说js中函数即对象.原来js中没有采用Java等语言中的类继承体系,而是使用原型对象(prototype)实现继承体系,具体说是利用"构造器"实现类的功能. 首先解释下原型继承中的两个重要概念:原型属性.原型对象(实例). 就js对象系统

  • JavaScript继承学习笔记【新手必看】

    JavaScript继承学习笔记【新手必看】

    JavaScript作为一个面向对象语言(JS是基于对象的),可以实现继承是必不可少的,但是由于本身并没有类的概念,所以不会像真正的面向对象编程语言通过类实现继承,但可以通过其他方法实现继承.实现继承的方法很多,下面就只是其中的几种. 一. 原型链继承 function Person() { //被继承的函数叫做超类型(父类,基类) this.name='mumu'; this.age='18'; } Person.prototype.name='susu';//当属性名相同时需就近原则,先在实

  • 全面理解JavaScript中的继承(必看)

    JavaScript中我们可以借助原型实现继承. 例如 function baz(){ this.oo=""; } function foo(){ } foo.prototype=new baz(); var myFoo=new foo(); myFoo.oo; 这样我们就可以访问到baz里的属性oo啦.在实际使用中这个样不行滴,由于原型的共享特点(数据保存在了堆上), 所有实例都使用一个原型,一但baz的属性有引用类型就悲剧了,一个实例修改了其他实例也都跟着变了...wuwuwu 自

  • 老生常谈 Java中的继承(必看)

    老生常谈 Java中的继承(必看)

    Java作为一面向对象的语言,具备面向对象的三大特征--继承,多态,封装. 继承顾名思义,继任,承接,传承的意思.面向对象的语言有一个好处,就是可以用生活中的例子来说明面向对象的特性.那么我们先来看看生活中的继承关系有哪些?最常见的:父母子女:汽车,电动车,自行车和车.无论哪种车,都有具备车的特性.再比如说:家里面的电饭锅,电磁炉,电冰箱.他们都属于电器类,都具有名字这个属性,也都需要用电这个方法.如果在程序中我们一个个类去把这些重复的代码都写上去,那不是浪费时间和精力吗?联系之前的知识,我们能

  • 简单理解JavaScript中的封装与继承特性

    JavaScript中的封装 封装简单地说就是让外界只能访问对象的共有变量和函数,隐藏细节和数据. js中有三种方法创建对象,分别为门户大开型.用命名规范区分私有变量.闭包创建真正的私有变量三种. 1.门户大开型,是实现对象的最基础的方法,所有方法与变量都是共有的外界可以访问. var Book = function(name){ if(this.check(name)){ console.log("error"); throw new Error("name null&qu

  • 带你彻底理解JavaScript中的原型对象

    带你彻底理解JavaScript中的原型对象

    一.什么是原型 原型是Javascript中的继承的基础,JavaScript的继承就是基于原型的继承. 1.1 函数的原型对象 ​ 在JavaScript中,我们创建一个函数A(就是声明一个函数), 那么浏览器就会在内存中创建一个对象B,而且每个函数都默认会有一个属性 prototype 指向了这个对象( 即:prototype的属性的值是这个对象 ).这个对象B就是函数A的原型对象,简称函数的原型.这个原型对象B 默认会有一个属性 constructor 指向了这个函数A ( 意思就是说:c

  • JavaScript基础教程——入门必看篇

    JavaScript基础教程——入门必看篇

    JavaScript他是一种描述性语言,其实他并不难学,只要用心学,一定会学好,我相信大家在看这篇文章的时候,一定也学过HTML吧,使用JavaScript就是为了能和网页有更好的交互,下面切入主题. 一. JavaScript 1.什么是JavaScript JavaScript是一种描述性语言,也是一种基于对象(Object)和事件驱动(Event Driven)的,并具有安全性的脚本语言. 2.JavaScript的特点 JavaScript主要用来向HTML页面添加交互行为. JavaS

  • 理解JavaScript中worker事件api

    理解JavaScript中worker事件api

    如果你不是很了解Event事件,建议先这篇文章<理解javascript中DOM事件>. 首先,我们需要实例一个Worker的对象,浏览器会根据新创建的worker对象新开一个接口,此接口会处理客户端与indexedDB数据库之间的通信.这里的数据库是指浏览器数据库.如果,你需要判断浏览器是否支持worker对象,详见如下代码.或者浏览器是否支持indexedDB数据库,详见同下,二者判断最好选择前者.因为IE不支持indexedDB . if(window.Worker){ dosometh

  • AJAX入门之深入理解JavaScript中的函数

    概述 函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解.JavaScript中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的.通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递.在继续讲述之前,先看一下函数的使用语法: function func1(-){-}var func2=function(-){-};var func3=function func4(-){-};var func5=new Function()

  • 理解 javascript 中的函数表达式与函数声明

    理解 javascript 中的函数表达式与函数声明

    常用闭包的同学肯定很清楚下面一段代码: //通常的闭包写法 (function () { ... }()) 那么我们的问题来了,为什么要在 function () {...}() 之外用圆括号包裹呢?解答这个问题,就需要我们理解 Javascript 中函数表达式与函数声明的概念. 函数定义带来的错误 虽然 function () {...} 看上去像是一个函数声明,但是由于没有函数名,它的本质其实是一个函数表达式.我们看下规范中对于函数声明与函数表达式的定义: 可以看出来,函数声明是必须带有函

  • 深入理解JavaScript中为什么string可以拥有方法

    引子 我们都知道,JavaScript数据类型分两大类,基本类型(或者称原始类型)和引用类型. 基本类型的值是保存在栈内存中的简单数据段,它们是按值访问的.JS中有五种基本类型:Undefined.Null.Boolean.Number和String. 引用类型的值是保存在堆内存中的对象,它的值是按引用访问的.引用类型主要有Object.Array.Function.RegExp.Date. 对象是拥有属性和方法的,所以我们看到下面这段代码一点也不奇怪. var favs=['鸡蛋','莲蓬']

  • 灵活的理解JavaScript中的this指向

    this是JavaScript中的关键字之一,在编写程序的时候经常会用到,正确的理解和使用关键字this尤为重要.首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然网上大部分的文章都是这样说的,虽然在很多情况下那样去理解不会出什么问题,但是实际上那样理解是不准确的,所以在你理解this的时候会有种琢磨不透的感觉),那么接下来我会深入的探讨这个问题.

随机推荐