javaScript——原型继承四步曲

再谈javascript原型继承

Javascript原型继承是一个被说烂掉了的话题,但是自己对于这个问题一直没有彻底理解,今天花了点时间又看了一遍<Javascript模式>中关于原型实现继承的几种方法,下面来一一说明下,在最后我根据自己的理解提出了一个关于继承比较完整的实现. 真正意义上来说Javascript并不是一门面向对象的语言,没有提供传统的继承方式,但是它提供了一种原型继承的方式,利用自身提供的原型属性来实现继承. 原型与原型链说原型继承之前还是要先说说原型和原型链,毕竟这是实现原型继承的基础. 在Javasc…

彻底理解Javascript原型继承

彻底理解Javascript原型继承之前写过一篇Javascript继承主题的文章,这篇文章作为一篇读书笔记,分析的不够深入. 本文试图进一步思考,争取彻底理解Javascript继承原理实例成员与原型成员举一个<高性能Javascript>书中例子 var book={ title :"High Performance JavaScript", publisher:"Yahoo!Press" }; alert(book.toString());/…

[转]Javascript原型继承

真正意义上来说Javascript并不是一门面向对象的语言,没有提供传统的继承方式,但是它提供了一种原型继承的方式,利用自身提供的原型属性来实现继承.Javascript原型继承是一个被说烂掉了的话题,但是自己对于这个问题一直没有彻底理解,今天花了点时间又看了一遍<Javascript模式>中关于原型实现继承的几种方法,下面来一一说明下,在最后我根据自己的理解提出了一个关于继承比较完整的实现,如果大家有不同意见,欢迎建议. 原型与原型链说原型继承之前还是要先说说原型和原型链,毕竟这是实现原型…

JavaScript原型继承工作原理

原型继承的定义当你阅读关于JS原型继承的解释时,你时常会看到以下这段文字: 当查找一个对象的属性时,JavaScript 会向上遍历原型链,直到找到给定名称的属性为止.——出自JavaScript秘密花园大多数JavaScript的实现用 __proto__ 属性来表示一个对象的原型链.在这篇文章里我们将看到__proto__与 prototype 的区别何在. 注:__proto__ 是一个不应在你代码中出现的非正规的用法,这里仅仅用它来解释JavaScript原型继承的工作原理. 以下代…

js原型继承四步曲及原型继承图

一:js原型继承四步曲 //js模拟类的创建以及继承 //动物(Animal),有头这个属性,eat方法 //名字这个属性 //猫有名字属性,继承Animal,抓老鼠方法 //第一步:创建父类 function Animal(name){ this.name = name; } //给父类添加属性方法 Animal.prototype.eat = function(){ console.log(this.name + " eating..."); } //第二步:创建子类 functi…

【读书笔记】读《编写高质量代码—Web前端开发修炼之道》 - JavaScript原型继承与面向对象

JavaScript是基于原型的语言,通过new实例化出来的对象,其属性和行为来自于两部分,一部分来自于构造函数,另一部分是来自于原型.构造函数中定义的属性和行为的优先级比原型中定义的属性和优先级高,如果构造函数和原型定义了同名的属性和行为,构造函数中的属性和行为会覆盖原型中的同名的属性和行为.如下图—— 当我们声明一个类时,其实同时生成了一个对应的原型,例如我们定义Animal这个类时,会生成一个与Animal类对应的原型,通过Animal.prototype可以指向这个原型,原型可以通过co…

JavaScript 原型继承开端

1.原型继承本质就javascript对象系统的实现来讲,对象并没有原型,而构造器有原型(构造器.prototype指向其原型).对象只有构造自某个原型的说法,并没有持有某个原型的说法.原型其实也是一个对象实例.原型的含义是指:如果构造器有一个原型对象A,则由该构造器创建的实例都必然复制自A. 2.空的对象是所有对象的基础来看看以下代码: <html> <head> <meta http-equiv="content-type" chars…

浅析Javascript原型继承(转)

引自: http://blog.csdn.net/kittyjie/article/details/4380918 原作者解释的浅显易懂,非常不错的JavaScript prototype总结 JS没有提供所谓的类继承,据说在2.0中要加入这种继承方式,但是要所有浏览器都实现2.0的特性那肯定又得N多年.昨天看了crockford的一个视频,里面讲解了一下JS的继承方式,按照PPT里面说的,一共分了三类:Prototypal,pseudoclassical,Parasitic Inheritan…

Javascript原型继承容易忽略的错误

编写Javascript的开发者都知道,JS虽然没有类(ES6添加了class语法),但是可以模拟出OOP语言的类和面向对象的概念,比如我们都知道的一句话,Javascript中处处是对象,而面向对象语言的特性是继承,封装,多态,抽象,而本文讨论的是Javascript的继承,Javascript的继承方式有原型继承,组合继承,寄生继承等等,在日常开发中,哪种继承方式更好用在于开发者对于程序的结果以及性能的考虑.笔者在下面列举出原型继承中经常容易被忽略的错误. 常见错误一: function F…

javascript原型继承圣杯模式

javascript纯面向对象开发需要使用到的一个模式,来对对象之间原型继承做中间层代理避免重复继承与代码杂乱 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"…

javascript原型继承

在传统的基于Class的语言如Java.C++中,继承的本质是扩展一个已有的Class,并生成新的Subclass. 由于这类语言严格区分类和实例,继承实际上是类型的扩展.但是,JavaScript由于采用原型继承,我们无法直接扩展一个Class,因为根本不存在Class这种类型. 但是办法还是有的.我们先回顾Student构造函数: function Student(props) { this.name = props.name || 'Unnamed'; } Student.prototyp…

javascript --- 原型继承与属性拷贝的综合应用

对于继承来说,主要目标就是将一些现有的功能据为己有.也就是说,我们在新建一个对象的时候,通常首先继承现有对象,然后再为其添加额外的属性和方法. 对此,我们可以通过一个函数调用来完成. 具体而言就是: 1. 使用原型继承的方式,将一个已有对象设置成新对象的原型. 2. 新建一个对象后,将另一个已有对象的属性拷贝过来. function objectPlus(o, stuff){ var n; function F(){}; F.prototype = o.prototype; n = new F(…

Javascript原型继承 proto

Javascript继承是通过原型链继承的原型链是依赖__proto__而不是prototype var animal = function(){}; var dog = function(){}; animal.price = 200;// dog.prototype = animal; var tidy = new dog(); console.log(dog.price) //undefined console.log(tidy.price) 如果加上 Function.prototyp…

【转载】Javascript原型继承-学习笔记

阮一峰这篇文章写的很好 http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html 笔记如下: 一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(p…

Javascript 原型继承(续)—从函数到构造器的角色转换

对于每一个声明的函数,里边都会带有一个prototype成员,prototype会指向一个对象,现在我们来聚焦prototype指向的这个对象,首先我们会认为,这个对象是一个该函数对应的一个实例对象,因为我们在new一个对象的时候,通常都会继承该原型prototype对象的属性和方法.比如: <html> <head> <meta http-equiv="content-type" charset="utf-8"/> <sc…

Javascript原型继承原理

对于面向对象的基础语法在此我就不重复了,对面向对象不熟悉的朋友可以参看<使用面向对象的技术创建高级 Web 应用程序>一文. prototype与[[prototype]] 在有面象对象基础的前提下,来看一段代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 //Animal构造函数 function Animal(name){ this.name = name; } //Animal原型对象 Animal.prototype = { id…

javascript 原型继承

因为javascript没有专门的机制去实现类,所以这里只能是借助它的函数能够嵌套的机制来模拟实现类.在javascript中,一个函数,可以包含变量,也可以包含其它的函数,那么,这样子的话,我们就可以把变量做为类的属性,内部的函数则作为成员方法了.那么,外层的函数,就可以看成是一个类了. 1.首先我们写一个动物类吧,其实他是一个函数,只不过我们可以把它看成这个类的构造函数 function Animal(){ console.log('Call the constuctor.'); } 2.然…

javascript原型继承---constructor篇

很多人对constructor的理解是指向对象的构造函数,今天才发现这种理解是有偏差的... 其实, constructor指向的不是实例化实例的构造函数,而是实例化该对象的构造函数的原型的构造函数以这个实例为例,p.constructor指向的是Person.prototype的构造函数 <script type="text/javascript"> function Person(name) { this.name = name } //在没有给Person.prot…

javascript原型继承中的两种方法对比

在实际的项目中,我们通常都是用构造函数来创建一个对象,再将一些常用的方法添加到其原型对象上.最后要么直接实例化该对象,要么将它作为父类,再申明一个对象,继承该父类. 而在继承的时候有两种常用方式,今天我们就来稍作探讨 //父类 function Person(name){ this.name = name; }; // 子类 function Student(sex){ Person.apply(this,arguments); //继承父类的构造函数 this.sex=sex;10 }; 1,…

js原型继承四步曲

<sctript> //1.创建父类 function Parent(){ this.name = name; } Parent.prototype.age = 20; //2.创建子类 function Child(){ Parent.call(this,"zhangsan"); } //3.确立继承关系 Child.prototype = Object.create(Parent.prototype); //4.改变构造器 Chils.prototype.constuc…

JavaScript原型继承的实例

// 创建构造函数实例(获取DOM节点) <div id="app">测试字符</div>…

javascript 原型继承与class extends 继承对比

//父类 Animal function Animal (name) { this.name = name; this.sleep = function () { console.log(this.name + '正在睡觉!') } } //cat 是 Animal 的子类 function Cat (name, age) { Animal.call(this, name); //子类 Cat 新增加的成员 age eat() Cat.prototype.age = age; Cat.pr…

JavaScript 类式继承与原型继承

交叉着写Java和Javascript都有2年多了,今天来总结下自己所了解的Javascript类与继承. Javascript本身没有类似Java的面向对象的类与继承术语,但其基于原型对象的思想却可以轻松实现各种类和继承. 下面来描述实现类的第一种方法,请看例子: function People(name, age){ this.name = name; this.age = age; this.say = function(){ console.log('hello, javascript!…

javascript 原型机制

prototype,__proto__,constructor 在 JavaScript 原型继承结构里面,规范中用 [[Prototype]] 表示对象隐式的原型,在 JavaScript 中用 __proto__ 表示,并且在 Firefox 和 Chrome 浏览器中是可以访问得到这个属性的,但是 IE 下不行.所有 JavaScript 对象都有 __proto__ 属性,但只有 Object.prototype.__proto__ 为 null,前提是没有在 Firefox 或者 Ch…

深入理解JavaScript原型：prototype,proto和constructor

JavaScript语言的原型是前端开发者必须掌握的要点之一,但在使用原型时往往只关注了语法,其深层的原理并未理解透彻.本文结合笔者开发工作中遇到的问题详细讲解JavaScript原型的几个关键概念,如有错误,欢迎指正. 1. JavaScript原型继承提到JavaScript原型,用处最多的场景便是实现继承.然而在实现继承时总有一些细节处理不到位,引起一些看起来莫名其妙的问题.比如使用下述代码: function Animal(){} Animal.prototype = {}; func…

js 原型继承和class继承

摘自http://www.liaoxuefeng.com/ 在传统的基于Class的语言如Java.C++中,继承的本质是扩展一个已有的Class,并生成新的Subclass. 由于这类语言严格区分类和实例,继承实际上是类型的扩展.但是,JavaScript由于采用原型继承,我们无法直接扩展一个Class,因为根本不存在Class这种类型. 但是办法还是有的.我们先回顾Student构造函数: function Student(props) { this.name = props.name ||…

[ JavaScript ] JavaScript 实现继承.

对于javascript中的继承,因为js中没有后端语言中的类式继承.所以js中的继承,一般都是原型继承(prototype). function P (name){ this.name = name; this.say = function(){ console.log('p'); } } function S (name,id){ this.id = id; this.eat = function(){ console.log('s'); } } S.prototype = P.protot…

深入理解javascript原型和闭包（6）——继承

为何用“继承”为标题,而不用“原型链”? 原型链如果解释清楚了很容易理解,不会与常用的java/C#产生混淆.而“继承”确实常用面向对象语言中最基本的概念,但是java中的继承与javascript中的继承又完全是两回事儿.因此,这里把“继承”着重拿出来,就为了体现这个不同. javascript中的继承是通过原型链来体现的.先看几句代码以上代码中,f1是Foo函数new出来的对象,f1.a是f1对象的基本属性,f1.b是怎么来的呢?——从Foo.prototype得来,因为f1.__prot…

web前端学习(二) javascript对象和原型继承

目录 1. JavaScrpt对象 2. 原型对象和继承 3. 对象的克隆 (1)javascript对象在JS中,对象是属性的容器.对于单个对象来说,都由属性名和属性值构成:其中属性名需要是标识符,而不能是字符串或者表达式,属性值可以是除undefined外的任何值.如果对象的属性值是函数,那么这个属性通常被称为方法.一般来说,对象可以通过直接量方式或者构造函数方式创建的,那么下面我用代码的方式更直观的展示对象的实现方式.(console.log在IE中无法工作,需要firefox或者Chr…

【javaScript——原型继承四步曲】的更多相关文章