图解JavaScript中的原型链】的更多相关文章

转自: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内置对象 所谓的内置对象 指的是:JavaScript本身就自己有的对象 可以直接拿来就用.例如Array String 等等.JavaScript一共有12内置对象    其中10个函数类型( String,Number,Boolean,Array,Function,Date,RegExp,Error,Object,Event )函数类型 有 __proto__和 prototype 属性 2个对象类型(Math,JSON) 对象类型只有__proto__属性. 下面…
工作中经常解除到prototype的概念,一开始错误的认为prototype是对象的原型链,其实prototype只能算是JavaScript开放出来的原型链接口,真正的原型链概念应该是__proto__,举个简单的例子: var A = function(){} var a = new A(); 上面的代码定义了一个对象A,然后声明了A的一个实例a,这里涉及到new 的工作机制,拆解后如下: var a = {}; //首先定义一个对象a a.__proto__ = A.prototype;…
理解原型链 在 JavaScript 的世界中,函数是一等公民. 上面这句话在很多地方都看到过.用我自己的话来理解就是:函数既当爹又当妈."当爹"是因为我们用函数去处理各种"粗活累活"(各种工具函数.页面交互.业务逻辑等):"当妈"是因为函数还会"生孩子"(创建对象). 在 JavaScript 的世界中,每一个对象都有一个隐藏的__proto__属性.这个属性指向生成这个对象的构造函数的原型(prototype).事实上,所…
javascript  2016-10-06  1120  9 上图是本宝宝用Illustrator制作的可视化信息图,希望能帮你理清Javascript对象与__proto__.prototype和原型链之间的关系.如果暂时看不懂也没关系,这篇文章让你从0变成1. 0.感性认识JS里的“德罗斯特效应”之原型链 如果你打开浏览器的控制面板,随便输入一个JS内置的构造器函数,比如Array,控制台输出的是一个名为Array的函数体,这好像并没有什么稀奇的,但是,当你接着输入Array.protot…
1.js中除了原始数据类型 都是对象. 包括函数也是对象,可能类似于C++函数对象把 应该是通过解释器 进行()操作符重载或其他操作, 用的时候把它当函数用就行 但是实际上本质是一个对象 原型也是一个对象,所以也称作原型对象 2. js中所有对象都有 __proto__ 属性,指向他的原型对象 一般原型对象{}内部包含两个必要属性constructor 和__proto__,__proto__指向原型对象的原型对象 3. js中函数对象具有prototype属性 (函数对象可以被当作constr…
今天,咱来聊聊JavaScript中的原型跟原型链 原型跟原型模式 这一块的知识,主要是设计模式方面的. 首先,我们知道JavaScript是面向对象的.既然是面向对象,那它自然也有相应的类跟对象等概念. 在JavaScript中,function这个东西还是比较特殊的,它既能用来声明方法,还能用来声明一个类似C#/.NET中的类,然后new一下得到一个对象. 举例 //js中的function使用方式一: function testFunc() { cosnole.log(123456); }…
理解原型设计模式以及 JavaScript中的原型规则(原文地址) 1.原型对象:我们创建的每一个函数(JavaScript中函数也是一个对象)都有一个原型属性 prototype,原型属性实质上是一个指针,它指向一个对象,这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法(通俗的说:就是这个特定类型的所有实例都可以共享原型对象包含的属性和方法). 2.原型对象的两赋值方式: ①: 此时实例对象 person1 和 person2 的属性和方法都是用原型对象共享的,所以上面结果是: ②…
请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans 原型车.这些车虽然是由“奥迪”或“标致”这些厂商制造的,可它们并不是你在街上或速公路上所见到的那类汽车.它们是专为参加高速耐力赛事而制造出来的. 厂家投入巨额资金,用于研发.设计.制造这些原型车,而工程师们总是努力尝试将这项工程做到极致.他们在合金.生物燃料.制动技术.轮胎的化合物成分和安全特性上…
两年前在我学习JavaScript的时候我就写过两篇关于原型继承的博客: 理解JavaScript中原型继承 JavaScript中的原型继承 这两篇博客讲的都是原型的使用,其中一篇还有我学习时的错误理解.今天看<Understanding Scopes>这让我从新思考了一下原型继承,更重要的是站在一个继承设计者的角度再看一下原型继承. 在传统的面向类的继承体系中,我们有个Best Practices是优先使用(对象)组合代替(类)继承,而原型继承是这个思想的一个运用.和面向对象和函数式编程一…
在Javascript面向对象编程中,原型继承不仅是一个重点也是一个不容易掌握的点.在本文中,我们将对Javascript中的原型继承进行一些探索. 基本形式 我们先来看下面一段代码: <code>//构造器函数 function Shape(){ this.x = 0; this.y = 0; } //一个shape实例 var s = new Shape(); </code> 虽然这个例子非常简单,但是有四个“非常重要”的点需要在此阐明: 1.s是一个对象,并且默认的它拥有访问…
一.序言   和其他面向对象的语言(如Java)不同,Javascript语言对类的实现和继承的实现没有标准的定义,而是将这些交给了程序员,让程序员更加灵活地(当然刚开始也更加头疼)去定义类,实现继承.(以下不讨论ES6中利用class.extends关键字来实现类和继承:实质上,ES6中的class.extends关键字是利用语法糖实现的) Javascript灵活到甚至可以实现接口的封装(类似Java中的Interface和implements). 二.类的实现 1.我对类的理解   首先,…
javascript圆形变成的基本规则: 所有数据都是对象: 要得到一个对象,不是通过实例化类,而是找到一个对象作为原型并克隆它: 对象会记住它的原型: 如果对象无法响应某个请求,它会把这个请求委托给它自己的原型: 所有的数据都是对象 在javascript的类型中,分为两类:基本类型和复杂类型: 基本类型包括:undefined.number.boolean.string.null:基本类型可以通过包装类的方式变成对象类型数据来处理: 复杂类型:object; 1.1  包装对象:所谓“包装对…
夜深风竹敲秋韵,万叶千声皆是恨. 原型链对于JavaScript来说是个很核心的概念.JavaScript不是基于类模板的面向对象语言:反而,它的面向对象机制是基于原型的.我们不可能说某个对象属于什么类,但却可以得到某个对象的原型对象.原型对象相当于一个父级代理,当属性在某个对象中找不到时,就会委托该对象的原型去查找. 原型链的基础 JavaScript的每个对象,都可以有一个隐式的链接(名为__proto__),指向它的原型对象.这次,我冒天下之大不韪(__proto__是私有属性,不能直接对…
对象有”prototype”属性,函数对象有”prototype”属性,原型对象有”constructor”属性. 关于原型 在JavaScript中,原型也是一个对象,通过原型可以实现对象的属性继承,JavaScript的对象实例中都包含了”[[Prototype]]”内部属性,这个属性所对应的就是该对象的原型.“[[Prototype]]”作为对象的内部属性,是不能被直接访问的.所以为了方便查看一个对象的原型,Firefox和Chrome中提供了__proto__这个非标准(不是所有浏览器都…
      这张图片有点劝退了,哈哈哈~    通过原型机制,JavaScript 中的对象从其他对象继承功能特性:这种继承机制与经典的面向对象编程语言的继承机制不同.本文将探讨这些差别,解释原型链如何工作,并了解如何通过 prototype 属性向已有的构造器添加方法 基于原型的语言? JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象,对象以其原型为模板.从原型继承方法和属性.原型对象也可能拥有原型,并从中继承…
原型 前言 继承是面向对象编程中相当重要的一个概念,它对帮助代码复用起到了很大的作用. 正文 Brendan Eich在创建JavaScript时,没有选择当时最流行的类继承机制,而是借鉴Self,用到了基于原型(prototype)的继承机制,这导致了JavaScript在继承机制方面与Java.C++等基于类继承机制的语言有着显著的区别. 其具体在于-C++的多重继承.Java的继承和接口实现中都包含"类"的概念,它们倾向于在创建对象之前[1]已经规定了对象需要继承的类和实现的接口…
1. 图解原型链 1.1 “铁三角关系”(重点) function Person() {}; var p = new Person(); 这个图描述了构造函数,实例对象和原型三者之间的关系,是原型链的基础:(1)实例对象由构造函数new产生:(2)构造函数的原型属性与实例对象的原型对象均指向原型(3)原型对象中有一个属性constructor指向对应的构造函数 原型链:p --> Person.prototype描述:实例对象能够访问到 Person.prototype 中不同名的属性和方法验证…
首先是一张关系图,避免抽象化理解时产生的困难 Function对象 函数对象是JavaScript学习中不可避免的一部分,而且这一部分相对重要且抽象 函数的创建方式有2种: 字面量创建 var foo = function(){ console.log("test"); } new 关键字创建实例对象 //let 函数名 = new Function(“参数列表”,”函数体”); let sum = new Function("num1,num2","re…
一直对JavaScript的原型与继承不了解,参考<JavaScript权威指南(第六版)>和<JavaScript高级程序设计(第三版)>对这个点的知识做个整理,方便自己记忆.以下内容大部分摘录自这两本书 每一个JavaScript对象都有与之相关的原型对象(prototype). 原型对象有什么用? JavaScript对象会继承原型对象的属性. 原型对象是从哪里来的? 首先我们先了解下创建对象基本的方式: //1,对象直接量 var a={},b={m:1} //2,构造函数…
1.原型是什么?原型链是什么? 原型是一个prototype对象,用于表示类型之间的关系: 原型链指的是在JavaScript中对象之间的继承是通过prototype对象指向父类对象,直到指向Object对象为止,这样就形成了一个原型指向的链条,专业术语称之为原型链. 举例: Student——>Person——>Object:学生继承人这个类,人这个类继承对象类: <span style="font-size:14px;"> var Person=functi…
原型(prototype) 函数的 prototype 属性(图) 每个函数都有一个prototype属性,它默认指向一个Object空对象(即称为:原型对象) 原型对象中有一个属性constructor,它指向函数对象 给原型对象添加属性(一般都是添加方法) 作用:函数的所有实例对象自动拥有原型中的属性(方法) 显式原型与隐式原型 每个函数 function 都有一个prototype属性,即 显式原型 每个实例对象都有一个__proto__,可称为隐式原型 实例对象的隐式原型的值 === 其…
构造函数,原型,实例三者的关系 构造函数: 构造函数是创建对象的一种常用方式, 其他创建对象的方式还包括工厂模式, 原型模式, 对象字面量等.我们来看一个简单的构造函数: function Product (name, role){ //构造函数的命名约定第一个字母使用大写的形式! this.name = name; this.role = role; } ( 1 ) 每一个构造函数都有一个prototype属性,我们可以在Chorme控制台中打印出Product.prototype属性. (…
目录 知识点 参考资料 结束语 知识点 面向对象编程 我们熟悉的Java和C#里,面向对象的两个基本概念是类class和实例instance,而ES6以前的Javascript并没有设计class. Javascript里的class是通过原型来实现的,通过将某个对象的__proto__属性指向另外一个对象来实现继承,如classA.__proto__ = classB,看上去就像B是A的父类,A继承自B类. 隐式原型.显式原型.原型链 通常我们说的隐式原型指的是__proto__,而显式原型指…
一.原型 每当创建一个函数时,函数就会包含一个prototype属性,这个属性其实相当于一个指针,指向调用该构造函数创建的对象原型. 这个对象原型里面有一个constructor属性,这个属性又指向构造函数. 当创建一个函数实例时,这个实例会包含一个指向对象原型的_proto_属性. 一个函数的原型也是一个对象,它最终指向object类型的对象原型. 当查找一个对象中的属性时,如果在当前对象中没有查找到,就会去与之关联的对象原型中去查找属性,如果还没有查找到,就会去原型的原型上去 查找,直到查找…
问题 初学js的同学,总是搞不清楚js中的原型是什么东西,看着控制台打印出来的一串串__proto__,迷惑不已. 例如我定义一个Person,创建一个实例p,并打印实例. function Person(){} var p = new Person(); console.log(p) 图中,打印出来一个Person的实例对象p, 这个对象有个__proto__ 属性,这个是什么东西? __proto__属性下又有constructor属性和__proto__属性. constructor是什么…
原型和原型链是 JS 中不可避免需要碰到的知识点,本文使用图片思维导图的形式缕一缕原型.原型链.实例.构造函数等等概念之间的关系. Constructor 构造函数 首先我们先写一个构造函数 Person,构造函数一般为了区别普通函数要求首字母大写: function Person(){} prototype 原型 原型指的就是一个对象,实例“继承”那个对象的属性.在原型上定义的属性,通过“继承”,实例也拥有了这个属性.“继承”这个行为是在 new 操作符内部实现的. 先不说实例,原型与构造函数…
今地铁上看慕课网js课程,又学习到关于原型的一些知识,记录如下.如有偏差欢迎指正: 三张图要连起来看哦~ 图解: 1.创建一个函数foo. 2.运用函数的prototype属性(这个属性就是实例对象的原型对象),增加 z,并 z 赋值为3. 3.var obj = new foo()  实例化一个构造函数obj,并穿件obj.y=2,obj.x=1; 4.在obj函数中,x.y.z的值都可以取到,因为z是通过原型对象添加的,原型对象的作用就是定义所有对象共享的属性和方法.所以 'z' in ob…
JavaScript 是一种脚本语言,支持函数式编程.闭包.基于原型的继承等高级功能.JavaScript一开始看起来感觉会很容易入门,但是随着使用的深入,你会发JavaScript其实很难掌握,有些基本概念让人匪夷所思.其中JavaScript 中的 this 关键字,就是一个比较容易混乱的概念,在不同的场景下,this会化身不同的对象.有一种观点认为,只有正确掌握了 JavaScript 中的 this 关键字,才算是迈入了 JavaScript 这门语言的门槛.在主流的面向对象的语言中(例…
原型对象也是普通的对象,是对象一个自带隐式的__proto__属性,原型也有可能有自己的原型,如果一个原型对象的原型不为null的话,我们就称之为原型链.原型链是由一些用来继承和共享属性的对象组成的(有限的)对象链. 原型对象中的属性可以被多个实例共享.原型对象存在于构造函数的属性(prototype)中,prototype的值是一个Object类型数据(对象). JavaScript的数据对象有哪些属性值呢,举几个简单的栗子: writable:这个属性的值是否可以改: configurabl…