探讨一下js中的继承和原型链】的更多相关文章

---恢复内容开始--- 每个JS对象一定对应一个原型对象,并从原型对象继承属性和方法. 也就是说 对象的__proto__属性的值就是它所对应的原型对象, 而prototype 只有函数才有的属性. 1. 先创建一个对象, 经分析可知,自定义对象的__proto__属性指向Object的原型,并且自定义对象没有 prototype的属性 2 创建函数,并打印出__proto__ 和 prototype     创建函数时,设置__proto__属性指向的是 Function的原型,并自动添加p…
1.继承 应注意区分继承和实例化,实例化是生成一个对象,这个对象具有构造函数的属性和方法:继承指的应该是利用父类生成一个新的子类构造函数,通过这个子类构造函数实例化的对象,具有子类的属性和方法,同时也具有父类的属性和方法. 2.原型链继承 2.1.实现方法 实现原型链继承的方法是通过重写子类的原型对象(比如 Student.prototype )的值为父类(比如Person) 的一个实例,由此可以实现继承(Student 继承了 Person ) . Son.prototype = new Pa…
先看一个例子 function User(){} var u1 = new User(); console.log(u1.prototype);// undefined 使用对象实例无法访问到prototype console.log(User.prototype);//{},使用构造函数名访问prototype console.log(u1.__proto__);//{},使用对象实例访问prototype的指针 这个是 __proto__ 和prototype最基本的区别:说明构造的对象无p…
在Javascript不存在类(Class)的概念,javascript中不是基于类的,而是通过构造函数(constructor)和原型链(prototype chains)实现的.但是在ES6中引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类.基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让原型对象的写法更加清晰.更像面向对象编程的语法而已. 1.构造函数的简单介绍 构造函数就是提供了一个生成对象的模…
一.在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…
一.原型链 ECMAScript中将原型链作为实现继承的主要方法,基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 实例1: function SupType() { this.property = true; } SupType.prototype.getSupvalue = function() { return this.property; }; function SubType() { this.subproperty = false; } //原型对象等于一个类型的实例…
一.何为原型链 原型是一个对象,当我调用一个对象的方法时,如果该方法没有在对象里面,就会从对象的原型去寻找.JavaScript就是通过层层的原型,形成原型链. 二.谁拥有原型 任何对象都可以有原型,当我们创建对象的时候,会自动为对象添加一个属性,这个属性就是原型,我们无法访问到他,但在firefox和chrome中可以通过一个非标准的属性__proto__(双下划线)来访问到原型(或通过Object.getPrototypeOf来访问). 三.理解原型链 我们先从以下代码入手 var foo…
相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对象之间的赋值,for...in语句,delete使用,成员方法,json对象的使用,prototype的使用,原型继承与原型链 JS面向对象(3) -- Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法 1.this的使用 核心:在js中,this表示当前对…
前言 JS 是没有继承的,不过可以曲线救国,利用构造函数.原型等方法实现继承的功能. var o=new Object(); 其实用构造函数实例化一个对象,就是继承,这里可以使用Object中的所有属性与方法.那么为什么能访问Object对象的方法,其实访问的是其原型对象的方法,所有的方法都是放在原型中而不是类中. console.log(o.__proto__ === Object.prototype) // true 继承的本质 console.log(o.__proto__ === Obj…
首先我们了解,js中的继承是主要是由原型链实现的.那么什么是原型链呢? 由于每个实例中都有一个指向原型对象的指针,如果一个对象的原型对象,是另一个构造函数的实例,这个对象的原型对象就会指向另一个对象的原型对象,如此循环,就行成了原型链. 在了解原型链之后,我们还需要了解属性搜索机制,所谓的属性搜索机制,就是当我们访问对象上的一个属性时,我们如何找到这个属性值.首先,我们现在当前实例中查找该属性,如果找到了,返回该值,否则,通过__proto__找到原型对象,在原型对象中进行搜索,如果找到,返回该…
面向对象编程都会涉及到继承这个概念,JS中实现继承的方式主要是通过原型链的方法. 一.构造函数.原型与实例之间的关系 每创建一个函数,该函数就会自动带有一个 prototype 属性.该属性是个指针,指向了一个对象,我们称之为 原型对象.什么是指针?指针就好比学生的学号,原型对象则是那个学生.我们通过学号找到唯一的那个学生.假设突然,指针设置 null, 学号重置空了,不要慌,对象还存在,学生也没消失.只是不好找了. 原型对象上默认有一个属性 constructor,该属性也是一个指针,指向其相…
ES中没有类的概念,这也使其对象和其他语言中的对象有所不同,ES中定义对象为:“无序属性的集合,其属性包含基本值.对象或者函数”.现在常用的创建单个对象的方法为对象字面量形式.在常见多个对象时,使用工程模式的一种变体. 1.理解对象 1)对象的属性分两种:数据属性和访问器属性,每个类型的属性都具有相应的特性. 数据属性:包含一个数据值的访问位置,在这个位置可以读取和写入数据.其包含四种特性:[[Configurable]].[[Enumerable]].[[Writable]].[[Value]…
JS中的继承(上) 学过java或者c#之类语言的同学,应该会对js的继承感到很困惑--不要问我怎么知道的,js的继承主要是基于原型(prototype)的,对js的原型感兴趣的同学,可以了解一下我之前写的JS中的原型对象 相信很多同学也跟我一样,刚开始接触js的面向对象编程的时候,都抱着一种排斥的心态--为什么js这么麻烦?其实了解完原型链后,再来看js的继承,你会发现js的继承其实比其他OOP语言更简单,更灵活,我们来看一个基于原型链的继承 // 父类 function Person() {…
JS中的继承(下) 在上一篇 JS中的继承(上) 我们介绍了3种比较常用的js继承方法,如果你没看过,那么建议你先看一下,因为接下来要写的内容, 是建立在此基础上的.另外本文作为我个人的读书笔记,才疏学浅,如有错误,敬请指正. 接下来我们要介绍另外3种相对比较奇葩的继承 一. 原型式继承 function clone (proto) { function F () {} F.prototype = proto return new F() } clone 内部首先是创建了一个空的构造函数F,然后…
  js中有三种继承方式:一.通过原型(prototype)实现继承 二.借用构造函数式继承,可分为通过call()方法实现继承和通过apply()方法实现继承 仅仅通过原型继承我们可以发现在实例化子类时无法向父类构造函数中传递参数,call()方法存在于Function对象实例中的原型对象属性中. var Person = function(name,age,sex){ this.name = name; this.age = age; this.sex = sex; } Person.pro…
1. 原型链继承(又称类继承) Child.prototype = new Parent(); function Parent (name, age) { this.name = name; this.age = age; } Parent.prototype.say = function(){ console.log('hello, my name is ' + this.name); }; function Child() { } Child.prototype = new Parent('…
JavaScript之继承(原型链) 我们知道继承是oo语言中不可缺少的一部分,对于JavaScript也是如此.一般的继承有两种方式:其一,接口继承,只继承方法的签名:其二,实现继承,继承实际的方法.JavaScript不支持签名,因此只有实现继承.其中实现继承主要是依赖于原型链的.下面我将以原型链为重点说说继承的几种主要的方式: 原型链继承 借用构造函数继承 组合继承(重点) 第一部分:原型链继承 A 要说原型链继承,不得不首先介绍一下原型链的概念. 想象一下,如果使原型对象等于另一个对象的…
作者 | Jeskson 来源 | 达达前端小酒馆 1 在学习JavaScript中,我们知道它是一种灵活的语言,具有面向对象,函数式风格的编程模式,面向对象具有两点要记住,三大特性,六大原则. 那么是哪些呢?具体的三大特性指的是什么?请记住三大特性:封装(Encapsulation),继承(Inheritance),多态(Polymorphism).我们常说的封装,继承,多态,三大特点.六大原则指:单一职责原则(SRP),开放封闭原则(OCP),里氏替换原则(LSP),依赖倒置原则(DIP),…
在讨论原型继承之前,先回顾一下关于创建自定义类型的方式,这里推荐将构造函数和原型模式组合使用,通过构造函数来定义实例自己的属性,再通过原型来定义公共的方法和属性. 这样一来,每个实例都有自己的实例属性副本,又能共享同一个方法,这样的好处就是可以极大的节省内存空间.同时还可以向构造函数传递参数,十分的方便. 这里还要再讲一下两种特色的构造函数模式: 1.寄生构造函数从形式上来看,这种模式和工厂模式并无区别: function Person(name, age, job){var o = new O…
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain Inheritance and the prototype chain 继承和 原型 链 JavaScript is a bit confusing for developers experienced in class-based languages (like Java or C++), as it is dy…
js中继承的实现方式很多,此处给出两种常用方式. <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title></title> </head> <body> </body> <script type="text/javascript"> //Range构造函数,定义属性 function Range(from…
[寒暄]好久没有更新博客了,说来话长,因为我下定决心要从一个后台程序员转为Front End,其间走过了一段漫长而艰辛的时光,今天跟大家分享下自己对javascript中原型链继承的理解. 总的说来,js中的常用的继承方式可以分为两种,一种是原型链式继承,这也是本文要谈的重点:另外一种是借用构造函数继承,这方面的理解,我将在下次的博客中更新.好了,闲话不多说,进入正题. 一,关于原型 首先,我们不得不解释下原型的概念:我们创建的每一个函数都有一个原型属性,即prototype,这个属性是一个指针…
继承:function Animal(name){ this.name = name; this.showName = function(){ alert(this.name); } } function Cat(name){ Animal.call(this, name); } var cat = new Cat("Black Cat"); cat.showName(); Animal.call(this) 的意思就是使用 Animal对象代替this对象,那么 Cat中不就有Ani…
一. 原型与构造函数 Js所有的函数都有一个prototype属性,这个属性引用了一个对象,即原型对象,也简称原型.这个函数包括构造函数和普通函数,我们讲的更多是构造函数的原型,但是也不能否定普通函数也有原型.譬如普通函数: function F(){ ; } alert(F.prototype instanceof Object) //true 构造函数,也即构造对象.首先了解下通过构造函数实例化对象的过程. function A(x){ this.x=x; } var obj=new A(1…
基于javascript原型链的层层递进查找规则,以及原型对象(prototype)的共享特性,实现继承是非常简单的事情 一.把父类的实例对象赋给子类的原型对象(prototype),可以实现继承 function Person(){ this.userName = 'ghostwu'; } Person.prototype.showUserName = function(){ return this.userName; } function Teacher (){} Teacher.proto…
JS对象继承方式 摘自<JavaScript的对象继承方式,有几种写法>,作者:peakedness 链接:https://my.oschina.net/u/3970421/blog/2872629 方式一:对象冒充 原理:构造函数使用this关键字给所有属性和方法赋值(即采用类声明的构造函数方式).因为构造函数只是一个函数,所以可使Parent构造函数称为Children的方法,然后调用它.Children会收到Parent的构造函数中定义的属性和方法. *** //父类构造函数 var P…
1.以复制方式实现的继承 1.1浅拷贝 基本类型的复制 var parent = { lanage: "chinese" } var child = { name: "xxx", age: 12 } function extend(parent, child) { var child = child || {}; for (const propertype in parent) { child[propertype] = parent[propertype]; }…
正式说继承之前,有两个相关小点: JS只支持实现继承,即继承实际的方法,不支持接口继承(即继承方法的签名,但JS中函数没签名) 所有对象都继承了Object.prototype上的属性和方法. 说继承之前还要再说一下原型.原型之所以很重要,原因之一就是可以利用它来实现JavaScript的继承.重写一个函数的原型对象,将其指定为另一个函数的实例,这样便实现了一个简单的原型链继承. 看一个利用原型链来实现继承的基础例子:   function Super(){ this.name='super';…
对象的遍历 对象可以当做数组处理,使用for in var person={}; person.name="cyy"; person.age=25; person.infos=function(){ alert(this.name+" "+this.age); } for(var i in person){ console.log(i);//属性名或方法名 console.log(person[i]);//属性值或方法值 } 使用构造函数声明的对象,需要实例化之后再…
在 ES6之前,在Javascript不存在类(Class)的概念,javascript中不是基于类的,而是通过构造函数(constructor)和原型链(prototype chains)实现的.但是目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏 览器也支持 ES6,不过只实现了 ES6 的部分特性和功能. 1.那么何为构造函数呢? 其实构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 一起使用.我 们可以把对象中一些公共的属性和方…