- 浏览: 3292332 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (567)
- Web前端-html/表单 (19)
- Web前端-CSS (24)
- Web前端-CSS框架 (4)
- Web前端-JS语言核心 (50)
- Web前端-JS客户端 (26)
- nodejs生态+grunt (10)
- seajs和requirejs (9)
- backbone等框架 (7)
- 模板基础 (7)
- Web前端-deps(不改动) (6)
- Web前端-component (10)
- Web前端-jquery-plugin (13)
- 浏览器兼容性 (6)
- Web前端-使用jQuery (25)
- Web前端-使用jqueryui (6)
- Web前端-性能优化 (3)
- Web协议-HTTP (6)
- ExtJS (13)
- PHP (22)
- PHP面向对象 (4)
- PHP扩展-SOAP (6)
- PHP扩展-curl (4)
- PHP与HTML(导出) (5)
- PHP扩展-综合 (7)
- mysql基础应用 (18)
- 技术心情 (18)
- 算法和面试题 (17)
- 工具(开发)使用 (36)
- memcached原理 (2)
- session和cookie (4)
- UML (2)
- Web前端_FusionCharts (5)
- Web前端_Flex (4)
- Web前端_JSP (3)
- JavaSE (10)
- JavaEE (4)
- tomcat (2)
- Servlet开发 (3)
- Spring开发 (1)
- REST相关 (2)
- 大访问量、高并发 (2)
- 网络编程 (1)
- YII (21)
- linux命令和内核 (12)
- yii与数据库 (10)
- yii与表单 (12)
- yii view层 (1)
- perl (7)
- yii扩展 (7)
- shell (4)
- photoshop (7)
- 视觉设计 (2)
- 我关注的名人在路上 (4)
- 1-自学能力 (1)
- 2-人际沟通能力 (3)
- 3-职业规划能力 (7)
- 4-项目管理能力 (2)
- python (3)
- django (4)
- Mysql高级应用 (6)
- prototype.js (4)
- Web系统安全 (1)
- Web前端-mobile (2)
- egret (6)
- jQuery源码分析 (5)
- fis (4)
最新评论
-
yzq21056563:
感谢作者分享~请教下,http://www.lisa33xia ...
CSS基础:text-overflow:ellipsis溢出文本 -
u012206458:
$.ajax的error,complete,success方法 -
DEMONU:
谢谢,虽然不能给你赞助,但是要给你顶
mysql中key 、primary key 、unique key 与index区别 -
njupt_tolmes:
阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿滕庆亚 ...
CSS基础:text-overflow:ellipsis溢出文本 -
zenmshuo:
用过SpreadJS,也包含数据可视化的图表
推荐几个web中常用js图表插件
作者:zccst
毫不夸张的说,这节是继承的核心所在。是重中之重。
一、原型链——将父类的实例赋给子类的prototype
缺点:虽然s1仍然指向父类的构造函数,但修改子类的共有方法并不会对父类有所影响,但是存在一个更为严重的问题是,子类没法继承父类的特权属性和特权方法。
二、原型链与call组合
三、原型继承的其他实现方式
1,直接将父类的prototype赋给子类的prototype
缺点:父类与子类耦合太高,因为改动了子类的prototype会影响父类。即使将原型对象的constructor指向子类构造函数,但子类和父类的实例都会共有相同的constructor,这种情形下修改子类的共有方法,同时会修改了父类的共有方法,说明此法不通。
2, niubility方式-利用空函数实现继承
优点:这种情况下修改Student的prototype就不会影响到Person的prototype对象了,并且,因为直接将Person的prototype赋给Empty的prototype,所以不会存在特权属性(实例属性)浪费资源的问题。这样利用空函数就能很好的解决共有方法的继承问题了。当然这时Student.prototype中的constructor是Person,所以最好加上Student.prototype.constructor = Student转换过来。
3,利用循环遍历拷贝的方法实现继承(循环将父类原型对象赋给子类原型对象)
for(var i in Person.prototype){
Student.prototype[i] = Person.prototype[i];
}
Student.prototype.constructor = Student;*/
优点:
父类原型对象的constructor指向父类构造函数,
子类原型对象的constructor指向子类构造函数,
这种循环方式,跟父类的实例属性和方法,没有任何关系,所以继承的实现用Call。
其实,父类和子类是没有任何关系的,唯一的联系是子类的prototype
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
毫不夸张的说,这节是继承的核心所在。是重中之重。
一、原型链——将父类的实例赋给子类的prototype
function Person(name,age){ this.name = name; this.age = age; this.arr = [11,22,33]; this.alertName = "alertA"; this.sayHi = function(){ alert('hi'); } } Person.prototype.walk = function(){ alert('walk.......'); } function Student(name,age,grade){ this.grade = grade; } Student.prototype = new Person(); var s1 = new Student('xiaoming',6,3); /* s1.walk();//walk....... console.log(s1.name,s1.age,s1.grade);//undefined undefined 3 console.log(s1.constructor); // Person(name,age) */ var s2 = new Student('xiaowang',8,6); console.log(s1.name,s1.age,s1.grade); console.log(s2.name,s2.age,s2.grade); s1.alertName = "alertB"; console.log(s1.alertName); delete s1.alertName; console.log(s1.alertName); console.log(s2.alertName); s1.arr.push(55); console.log(s1.arr); console.log(s2.arr); Student.prototype.study = function(){ alert('I am study'); } var p1 = new Person(); //p1.study();// p1.study is not a function
缺点:虽然s1仍然指向父类的构造函数,但修改子类的共有方法并不会对父类有所影响,但是存在一个更为严重的问题是,子类没法继承父类的特权属性和特权方法。
二、原型链与call组合
三、原型继承的其他实现方式
1,直接将父类的prototype赋给子类的prototype
缺点:父类与子类耦合太高,因为改动了子类的prototype会影响父类。即使将原型对象的constructor指向子类构造函数,但子类和父类的实例都会共有相同的constructor,这种情形下修改子类的共有方法,同时会修改了父类的共有方法,说明此法不通。
function Person(name,age){ this.name = name; this.age = age; this.sayHi = function(){ alert('hi'); } } Person.prototype.walk = function(){ alert('walk.......'); } function Student(name,age,grade){ //子类 this.grade = grade; } Student.prototype = Person.prototype; var s1 = new Student('xiaoming', 6, 3); s1.walk();//walk....... console.log(s1.name, s1.age, s1.grade);//undefined undefined 3 console.log(s1.constructor); // 就是Person构造函数 Person(name,age){...} //主要缺陷:不能继承父类的特权属性和特权方法,子类的构造函数变成了Person(name,age),直接导致修改子类的原型方法时,父类也跟着修改了,耦合度太高了。 Student.prototype.study = function(){ alert('I am study'); } var p1 = new Person(); p1.study();//I am study
2, niubility方式-利用空函数实现继承
优点:这种情况下修改Student的prototype就不会影响到Person的prototype对象了,并且,因为直接将Person的prototype赋给Empty的prototype,所以不会存在特权属性(实例属性)浪费资源的问题。这样利用空函数就能很好的解决共有方法的继承问题了。当然这时Student.prototype中的constructor是Person,所以最好加上Student.prototype.constructor = Student转换过来。
function Person(name,age){ this.name = name; this.age = age; } Person.prototype.sayHi=function(){ alert('hi'); } function Student(name,age,grade){ Person.call(this,name,age); this.grade = grade; } function Empty(){ } Empty.prototype = Person.prototype; Student.prototype = new Empty(); Student.prototype.constructor = Student;//特别关键的一句 Student.prototype.sayGrade=function(){ alert(this.grade); } var p1 = new Person('xiaoming',10); var s1 = new Student('xiaohong',9,3); console.log(p1);//Person { name="xiaoming", age=10, sayHi=function()} console.log(s1);//Student {name="xiaohong", age=9, grade=3, 更多...} console.log(p1.constructor);//Person(name,age) 父类的实例指向仍是父类 console.log(s1.constructor);//Student(name,age,grade) //子类的实例指向仍是子类 //以下是错误的 Student.prototype.study = function(){ alert('I am study'); } var o1 = new Person(); o1.study();//错误 var e1 = new Empty(); e1.study();//错误
3,利用循环遍历拷贝的方法实现继承(循环将父类原型对象赋给子类原型对象)
for(var i in Person.prototype){
Student.prototype[i] = Person.prototype[i];
}
Student.prototype.constructor = Student;*/
优点:
父类原型对象的constructor指向父类构造函数,
子类原型对象的constructor指向子类构造函数,
这种循环方式,跟父类的实例属性和方法,没有任何关系,所以继承的实现用Call。
function Person(name,age){ this.name = name; this.age = age; this.sayName = function(){ alert(this.name); }; } Person.prototype.sayAge = function(){ alert(this.age); } function Student(name,age,grade){ Person.call(this, name, age); this.grade = grade; } //循环copy方式继承 for(var i in Person.prototype){ alert(i);//只循环了一次,就是将父类原型方法sayAge赋给子类原型对象 Student.prototype[i] = Person.prototype[i]; } //批注:for in只循环自定义的prototype对象属性和方法,所以并不会修改constructor指针指向 //继续添加方法 Student.prototype.sayGrade = function(){ alert(this.grade); } var s1 = new Student("zheng", 30, 3); console.log(s1); console.log(s1.constructor); s1.sayGrade(); var p1 = new Person("aliali", 50); console.log(p1); console.log(p1.constructor); //p1.sayGrade();
其实,父类和子类是没有任何关系的,唯一的联系是子类的prototype
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
发表评论
-
[正则]改变URL中的参数值
2015-05-20 20:37 4357作者:zccst 如果一个URL是:http://www.e ... -
理解JavaScript的单线程运行机制及setTimeout(fn,0)
2015-03-30 17:56 5541zccst整理 阮老师的链接 ... -
延迟自定义函数
2015-03-26 14:02 1019作者:zccst 如果函数内又定义了一个跟自己同名的函数,执 ... -
js语句和表达式
2015-03-11 11:21 677作者:zccst 一直觉得语句和表达式很简单,不需要专门留意 ... -
再次学习try catch finally
2015-03-10 11:26 1726作者:zccst 一、基本介绍 JavaScript的错误 ... -
[201502]封装
2015-02-07 11:59 761作者:zccst 我理解的封装是建立在熟悉面向对象和继承的基 ... -
js运算符优先级
2015-01-26 10:39 2560作者:zccst js运算符优先级也是一个巨大的坑。有时候你 ... -
《JavaScript模式》读书笔记
2015-01-23 11:59 845作者:zccst 第四章:函 ... -
js判断复合数据类型的两种方式(typeof不奏效了)
2014-11-07 17:47 2465作者:zccst typeof认为所有的复合数据类型都是&q ... -
js-闭包(权威指南版)
2014-10-27 18:42 1356作者:zccst //1,闭包是 ... -
js数据类型转换
2014-10-22 10:53 6621作者:zccst 2015-3-27 类 ... -
html5的onhashchange和history历史管理
2014-09-20 08:18 4713作者:zccst 现在的开发,越来越倾向于页面内跳转,这种情 ... -
Javascript语言精粹-毒瘤和糟粕
2014-09-16 18:37 1173作者:zccst Javascript是一门语言,用久了肯定能 ... -
[夏天Object]运行时程序执行的上下文堆栈(一)
2014-07-01 22:26 1532作者:zccst 时间:2014-07-01 这已经是第二 ... -
[Object]继承(经典版)(五)封装
2014-06-18 22:21 1050作者:zccst 封装已经上升到写插件的水平了,与多重继承属 ... -
[Object]继承(经典版)(四)多重继承和组合继承
2014-06-18 22:16 1537作者:zccst 一、多重继承 不得不说,这又是异常精彩的 ... -
[Object]继承(经典版)(三)继承理论总结
2014-06-18 22:15 1227作者:zccst 更新:在JavaScript模式中,作者 ... -
[Object]继承(经典版)(一)对象冒充和Call
2014-06-18 21:51 2499作者:zccst 先臆想一下这种方法 var a = ... -
[Object]面向对象编程(高程版)(0)属性和方法
2014-06-16 23:04 926zccst转载+原创 function Person() ... -
[Object]面向对象编程(高程版)(0)原型方法能调用实例方法?
2014-06-09 16:41 1223作者:zccst 按照我的理解,实例方法在对象中,原型方法在 ...
相关推荐
终极原型链图示讲解 注1:原型对象是Object函数的实例对象,即,构造函数定义时,Object函数也创建了一个原型对象。且,构造函数的原型对象中有一个__proto__(隐式原型对象)指向Object的原型对象。 注2:Object函数...
原型对象除了有原型属性外,为了实现继承,还有一个原型链指针__proto__,该指针指向上一层的原型对象,而上一层的原型对象的结构依然类似,这样利用__proto__一直指向Object的原型对象上,而Object的原型对象用...
本文实例讲述了js对象继承之原型链继承的用法。分享给大家供大家参考。具体分析如下: 代码如下:[removed] //定义猫的对象 var kitty = {color:’yellow’,bark:function(){alert(‘喵喵’);},climb:...
作用:原型链的存在,主要是为了实现对象的继承。 一、 记住以下5句话,轻松搞定js原型链 Function 和 Object 都是构造函数 所有的构造函数都是Function new出来的(Function自己new了自己);所有的原型对象...
ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。在JavaScript中,用 __proto__ 属性来表示一个对象的原型链。当查找一个...
本文实例讲述了javascript基于原型链的继承及call和apply函数用法。分享给大家供大家参考,具体如下: 1. 继承是面向对象编程语言的一个重要特性,比如Java中,通过extend可以实现多继承,但是JavaScript中的继承...
object c中关于继承代码示例,代码
原型链是JavaScript中继承的主要方法。 原型链的基本思想是:利用原型让一个引用类型继承另一个引用类型的属性和方法。 构造函数、原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数...
说实在话,以前我只需要知道“寄生组合继承”是最好的,有个祖传代码...其中,原型链继承和原型式继承有一样的优缺点,构造函数继承与寄生式继承也相互对应。寄生组合继承基于Object.create, 同时优化了组合继承,成
首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询obj的原型,我们通过判断obj的原型是否与Object.prototype相等来证明是否存在obj的原型,答案返回true,所以存在。...
前言 在 segmentfault 上看到这样一道题目: ...在解题之前,先再说说 原型、原型链,以及 Function 和 Object 的关系,这也是本文的重点。 原型 在创建一个函数的时候,会自动为其创建一个原型对
而由这个函数创建的对象也有一个__proto__属性指向这个原型,而函数的原型是一个对象,所以这个对象也会有一个__proto__指向自己的原型,这样逐层深入直到Object对象的原型,这样就形成了原型链。下面这张图很好的...
先看一张图,梳理梳理。 一、基本概念 【原型链】每个构造函数都有一个对象,原型...所有引用类型默认都继承了Object,而这个继承也是通过原型链实现的。所有函数的默认原型都是Object的实例,因此默认原型都会包含
一、原型规则 1、所有的引用类型(数组、对象、函数)都具有对象特性,即可自由扩展属性(除了“null”) var array=[];array.a=1; var object={};object.a=1; function func(){}; func.a=1; 2、所有的引用类型...
JavaScript原型及原型链终极详解 一. 普通对象与函数对象 JavaScript 中,万物皆对象!但对象也是有区别的。分为普通对象和函数对象,Object,Function 是JS自带的函数对象。下面举例说明 function f1(){}; var ...
对于那些熟悉基于类的面向对象语言(Java 或者 C++)的...这个原型对象又有自己的原型,直到某个对象的原型为null 为止(也就是不再有原型指向),组成这条链的最后一环。这种一级一级的链结构就称为原型链(prototype
js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解。 首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询obj的原型,我们通过判断obj的原型...
原型链 所有对象都是基于Object.prototype,Object.prototype就是JavaScript的根对象,在Object.prototype中定义的方法都可以被其它对象访问到,当然也可以被重写了,所以直接在Object.prototype上调用的是原始功能...