Javascript之继承(原型链方式)】的更多相关文章

Javascript继承通常有三种方式. 第一种:组合式继承: function SuperType(name) { this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function() { console.log(this.name); }; function SubType(name, age) { //通过ca…
一.原型链继承 function ClassA() {} ClassA.prototype.color = "blue"; ClassA.prototype.sayColor = function () { alert(this.color); }; function ClassB() {} //继承ClassA的原型内容 ClassB.prototype = new ClassA(); 这样ClassB的实例化对象b有个_prop_属性指向了ClassB.prototype,而其本身…
一.序言   和其他面向对象的语言(如Java)不同,Javascript语言对类的实现和继承的实现没有标准的定义,而是将这些交给了程序员,让程序员更加灵活地(当然刚开始也更加头疼)去定义类,实现继承.(以下不讨论ES6中利用class.extends关键字来实现类和继承:实质上,ES6中的class.extends关键字是利用语法糖实现的) Javascript灵活到甚至可以实现接口的封装(类似Java中的Interface和implements). 二.类的实现 1.我对类的理解   首先,…
转自:http://www.jianshu.com/p/a81692ad5b5d typeof obj 和 obj instanceof Type 在JavaScript中,我们经常用typeof obj和obj instanceof Type来识别类型,那么两者的区别在哪?先来看两段代码 <!--typeof obj的方式判断--> <script>    var str = "toby";    console.log(typeof str);// stri…
1.原型链 原型链是JavaScript中继承的主要方法. 每个构造函数都拥有一个原型对象,原型对象都包含一个指向构造函数的指针(constructor),实例都包含一个指向原型对象的内部指针(__proto__). 假如,原型对象(Son.prototype)等于另一个类型(Pserson)的实例(person1),那么此时的原型对象(Son.prototype)将包含一个指向另一个原型(Person.prototype)的指针,相应的,另有一个原型(Person.prototype)中也包含…
作者的话:原型链是JavaScript中相当重要的一个知识点,这里我使用了函数结构图,来帮助我更好的理解 /* 原型链继承方式: 通过改变一个对象的原型对象的指向来继承另一个对象 原理: 我们知道,一个对象的实例会继承他的原型对象的所有属性和方法.所以说,如果,我们继承对象的原型对象,是被继承对象的原型对象的实例的话,那么,他不就继承了被继承对象的原型对象的所有属性和方法了么 */ //创建一个被继承对象,并给他两个属性 function a(){ this.name = "兔子只吃胡萝卜&qu…
理解原型链 在 JavaScript 的世界中,函数是一等公民. 上面这句话在很多地方都看到过.用我自己的话来理解就是:函数既当爹又当妈."当爹"是因为我们用函数去处理各种"粗活累活"(各种工具函数.页面交互.业务逻辑等):"当妈"是因为函数还会"生孩子"(创建对象). 在 JavaScript 的世界中,每一个对象都有一个隐藏的__proto__属性.这个属性指向生成这个对象的构造函数的原型(prototype).事实上,所…
一.前言 继承是面向对象(OOP)语言中的一个最为人津津乐道的概念.许多面对对象(OOP)语言都支持两种继承方式::接口继承 和 实现继承 . 接口继承只继承方法签名,而实现继承则继承实际的方法.由于js中方法没有签名,在ECMAScript中无法实现接口继承.ECMAScript只支持实现继承,而且其 实现继承 主要是依靠原型链来实现的. 二.概念 2.1简单回顾下构造函数,原型和实例的关系: 每个构造函数(constructor)都有一个原型对象(prototype),原型对象都包含一个指向…
本文介绍下js的OOP中的继承. 上图的要点为:Foo函数在创建时会自动生成内置属性prototype,而typeof Foo.prototype是object类型的. 上图的要点为:Foo.prototype内置两个属性,constructor和__proto__. 上图的要点为: 1.Student使用Person.call(this,name,age)来调用父类的构造方法. 2.实现继承,关键在于Student.prototype = Object.create(Person.protot…
温故而知新: 在之前的文章已经重点了解了原型对象,今天就理一理这个原型对象在原型链式的继承中的使用 function a(x,y){this.x=x;this.y=y;} //定义一个函数,当构造函数用(正经从程序用大写哈!) 原型对象上添加属性 a.prototype.ayuanxing="a原型属性"; new 一个对象看看咯: 同样的,定义一个b函数: function b(z){this.z=z}; b.prototype.byuanxing="b原型属性"…
夜深风竹敲秋韵,万叶千声皆是恨. 原型链对于JavaScript来说是个很核心的概念.JavaScript不是基于类模板的面向对象语言:反而,它的面向对象机制是基于原型的.我们不可能说某个对象属于什么类,但却可以得到某个对象的原型对象.原型对象相当于一个父级代理,当属性在某个对象中找不到时,就会委托该对象的原型去查找. 原型链的基础 JavaScript的每个对象,都可以有一个隐式的链接(名为__proto__),指向它的原型对象.这次,我冒天下之大不韪(__proto__是私有属性,不能直接对…
说实在话,以前我只需要知道"寄生组合继承"是最好的,有个祖传代码模版用就行.最近因为一些事情,几个星期以来一直心心念念想整理出来.本文以<JavaScript高级程序设计>上的内容为骨架,补充了ES6 Class的相关内容,从我认为更容易理解的角度将继承这件事叙述出来,希望大家能有所收获. 1. 继承分类 先来个整体印象.如图所示,JS中继承可以按照是否使用object函数(在下文中会提到),将继承分成两部分(Object.create是ES5新增的方法,用来规范化这个函数…
原型对象也是普通的对象,是对象一个自带隐式的__proto__属性,原型也有可能有自己的原型,如果一个原型对象的原型不为null的话,我们就称之为原型链.原型链是由一些用来继承和共享属性的对象组成的(有限的)对象链. 原型对象中的属性可以被多个实例共享.原型对象存在于构造函数的属性(prototype)中,prototype的值是一个Object类型数据(对象). JavaScript的数据对象有哪些属性值呢,举几个简单的栗子: writable:这个属性的值是否可以改: configurabl…
ECMAScript只支持实现继承,其实现继承主要是靠原型链来实现. 原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 简单回顾下构造函数.原型和实例的关系: 每个构造函数都有一个原型对象,原型对象包含一个指向构造函数的指针(prototype),而实例则包含一个指向原型对象的内部指针(__proto__). 实现原型链有一种基本模式,其代码大致如下: function aa() { this.boolean_1 = true; } aa.prototype.value…
1. JavaScript内置对象 所谓的内置对象 指的是:JavaScript本身就自己有的对象 可以直接拿来就用.例如Array String 等等.JavaScript一共有12内置对象    其中10个函数类型( String,Number,Boolean,Array,Function,Date,RegExp,Error,Object,Event )函数类型 有 __proto__和 prototype 属性 2个对象类型(Math,JSON) 对象类型只有__proto__属性. 下面…
这里先说基于原型链实现的继承.那首先就得明白什么是原型链了: 每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针. 那么,假如我们让原型对象等于另一个类型的实例,此时的原型对象将包含指向另一个原型对象的指针,相应地,另一个原型对象也包含着指向另一个构造函数的指针. 假如另一个原型又是另一个类型的实例,那么上述关系依然成立.层层递进,就成一条链了. 实现原型链的基本模式: function SuperType() { this.propert…
javascript  2016-10-06  1120  9 上图是本宝宝用Illustrator制作的可视化信息图,希望能帮你理清Javascript对象与__proto__.prototype和原型链之间的关系.如果暂时看不懂也没关系,这篇文章让你从0变成1. 0.感性认识JS里的“德罗斯特效应”之原型链 如果你打开浏览器的控制面板,随便输入一个JS内置的构造器函数,比如Array,控制台输出的是一个名为Array的函数体,这好像并没有什么稀奇的,但是,当你接着输入Array.protot…
对象 function f1(){ }; typeof f1 //"function"函数对象 var o1 = new f1(); typeof o1 //"object"普通对象 var o2 = {}; typeof o2 //"object"普通对象 JavaScript中将对象分为普通对象和函数对象. 使用函数对象可以创建普通对象,普通对象没法创建函数对象. 凡是通过new Function创建的对象都是函数对象,其他都是普通对象(通常…
许多OO语言支持两种继承:接口继承和实现继承.ECMAScript只支持实现继承,且继承实现主要依赖原型链实现. 原型链 基本思想:利用原型让一个引用类型继承另一个引用类型的属性和方法. 构造函数.原型和实例的关系:每个构造函数均有一个原型对象,原型对象均包含一个指向构造函数的指针,实例均包含一个指向原型对象的内部指针.若让原型对象等于另一个类型的实例,此时原型对象将包含一个指向 另一个原型的指针,相应地,另一个原型中也包含一个指向另一个构造函数的指针.若另一个原型又是另一个类型的实例,那么上述…
原型链可以说是Javascript的核心特征之一,当然也是难点之一.学过其它面向对象的编程语言后再学习Javascript多少会感到有些迷惑.虽然Javascript也可以说是面向对象的语言,但是其实现面向对象是通过prototype-based的机制而不是class-based机制.它没有其它面向对象语言的继承,多态等,但是我们却可以通过prototype来实现继承. 下面我就带大家来了解一下原型链 原型链初接触 之前写过<你理解Javascript的闭包吗>这篇文章,在介绍闭包的时候首先是…
原型[prototype]: 为其他对象提供共享属性的对象. 每个函数都有一个原型(prototype)属性,这个属性是一个指针,指向一个对象,这个对象包含特定实例共享的一些属性和方法. 以例服人: 这个例子说明了原型对象是共享的,并且是一个指针,并且对象的实例中也有指向prototype指向对象的指针. function Animal(name) { this.name = name || "动物"; } Animal.prototype.runs = function() { co…
工作中经常解除到prototype的概念,一开始错误的认为prototype是对象的原型链,其实prototype只能算是JavaScript开放出来的原型链接口,真正的原型链概念应该是__proto__,举个简单的例子: var A = function(){} var a = new A(); 上面的代码定义了一个对象A,然后声明了A的一个实例a,这里涉及到new 的工作机制,拆解后如下: var a = {}; //首先定义一个对象a a.__proto__ = A.prototype;…
方法内部还有个方法,实例化父方法后,再次调用父方法,可以运行父方法内部的子方法,这样的程序就叫做闭包 DEMO如下: //function outerFn() { // var outerVar = 0; // document.write("Outer function<br/>"); // function innerFn() { // outerVar++; // document.write("Inner function\t"); // doc…
​ /*实现继承的六种方式*/ /*1.扩展原型对象的方法实现继承*/ function Foo1(){} //在Foo1函数上扩展一个fn1方法,由构造函数创建的对象都具有fn1这个方法 Foo1.prototype.fn1=function(){}; /*2.替换原型对象实现继承*/ function Foo2(){} //给Foo2函数的原型对象重新赋值,注意不要忘记添加constructor属性 Foo2.prototype={ constructor:Foo2, fn1:functio…
一个js对象,除了自己设置的属性外,还会自动生成proto.class.extensible属性,其中,proto属性指向对象的原型. 对象的属性也有writable.enumerable.configurable.value和get/set的配置方法. 对象的创建方式有三种: 一.使用字面量直接创建. 二.基于原型链创建. 分析上图,要点如下: 1.可以new运算符新建对象,foo为自定义函数,即是对象. 2.可以设置foo.prototype上的属性. 3.变量z在原型链上,为foo.pro…
构造函数.原型链: function Person(name, age, job) { this.name = name; this.age = age; this.job = job; // this.sayName = function () { // console.log(this.name); // }; Person.prototype.sayName = function () { console.log(this.name); } } var p1 = new Person('J…
我的上一篇文章有解释绅士原型及简单的原型链,在这里我将对原型链做完整讲述: // 函数的原型链: 把函数当对象(实例对象)来看 function Person(){} // 底层Function创建出来的Person, 底层中任意函数都是Function创建的 // var Person = new Function(); // 把Person 当孩子来看,Person对象的原型链长啥样 // Person ==> Function.prototype ==> Object.prototype…
javascript中实现继承的三种方式:原型继承.借用构造函数继承.混合继承: /* js当中的继承 js中 构造函数 原型对象 实力对象的关系: 1 构造函数.prototype = 原型对象 2 原型对象.constructor = 构造函数(模板) 3 原型对象.isPrototypeOf(实例对象) 判断实例对象的原型是不是当前对象 4 构造函数 实力对象 是 类和对象的关系 */ /* 1 原型继承 给子类构造函数的原型对象赋值为父类构造函数的实例 赋值之后产生的关系: 1 子类的原…
1.js中除了原始数据类型 都是对象. 包括函数也是对象,可能类似于C++函数对象把 应该是通过解释器 进行()操作符重载或其他操作, 用的时候把它当函数用就行 但是实际上本质是一个对象 原型也是一个对象,所以也称作原型对象 2. js中所有对象都有 __proto__ 属性,指向他的原型对象 一般原型对象{}内部包含两个必要属性constructor 和__proto__,__proto__指向原型对象的原型对象 3. js中函数对象具有prototype属性 (函数对象可以被当作constr…
prototype.constructor仅仅可以用于识别对象是由哪个构造函数初始化的,仅此而已. var one=new Person(‘js’); 要解释这个结果就要仔细研究一下new这个操作符了.var one=new Person(‘js’);这个语句执行的过程可以分成下面的语句: var one={}; Person.call(one,'js');…