- 浏览: 3315485 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (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 4414作者:zccst 如果一个URL是:http://www.e ... -
理解JavaScript的单线程运行机制及setTimeout(fn,0)
2015-03-30 17:56 5593zccst整理 阮老师的链接 ... -
延迟自定义函数
2015-03-26 14:02 1055作者:zccst 如果函数内又定义了一个跟自己同名的函数,执 ... -
js语句和表达式
2015-03-11 11:21 707作者:zccst 一直觉得语句和表达式很简单,不需要专门留意 ... -
再次学习try catch finally
2015-03-10 11:26 1787作者:zccst 一、基本介绍 JavaScript的错误 ... -
[201502]封装
2015-02-07 11:59 804作者:zccst 我理解的封装是建立在熟悉面向对象和继承的基 ... -
js运算符优先级
2015-01-26 10:39 2619作者:zccst js运算符优先级也是一个巨大的坑。有时候你 ... -
《JavaScript模式》读书笔记
2015-01-23 11:59 889作者:zccst 第四章:函 ... -
js判断复合数据类型的两种方式(typeof不奏效了)
2014-11-07 17:47 2512作者:zccst typeof认为所有的复合数据类型都是&q ... -
js-闭包(权威指南版)
2014-10-27 18:42 1388作者:zccst //1,闭包是 ... -
js数据类型转换
2014-10-22 10:53 6666作者:zccst 2015-3-27 类 ... -
html5的onhashchange和history历史管理
2014-09-20 08:18 4757作者:zccst 现在的开发,越来越倾向于页面内跳转,这种情 ... -
Javascript语言精粹-毒瘤和糟粕
2014-09-16 18:37 1204作者:zccst Javascript是一门语言,用久了肯定能 ... -
[夏天Object]运行时程序执行的上下文堆栈(一)
2014-07-01 22:26 1569作者:zccst 时间:2014-07-01 这已经是第二 ... -
[Object]继承(经典版)(五)封装
2014-06-18 22:21 1133作者:zccst 封装已经上升到写插件的水平了,与多重继承属 ... -
[Object]继承(经典版)(四)多重继承和组合继承
2014-06-18 22:16 1580作者:zccst 一、多重继承 不得不说,这又是异常精彩的 ... -
[Object]继承(经典版)(三)继承理论总结
2014-06-18 22:15 1263作者:zccst 更新:在JavaScript模式中,作者 ... -
[Object]继承(经典版)(一)对象冒充和Call
2014-06-18 21:51 2545作者:zccst 先臆想一下这种方法 var a = ... -
[Object]面向对象编程(高程版)(0)属性和方法
2014-06-16 23:04 960zccst转载+原创 function Person() ... -
[Object]面向对象编程(高程版)(0)原型方法能调用实例方法?
2014-06-09 16:41 1277作者:zccst 按照我的理解,实例方法在对象中,原型方法在 ...
相关推荐
经典继承指的是早期的原型继承模式,它通过在子函数的原型对象上直接设置属性和方法来实现继承,这种方式存在的缺点与原型链继承类似。组合式继承是结合了原型链继承和构造函数继承的优点,既可以通过原型链继承父...
组合继承,又叫伪经典继承,结合了原型链继承和借用构造函数继承。它通过原型链实现对原型属性和方法的继承,同时通过借用构造函数实现对实例属性的继承。 优点: - 保留了原型链继承和借用构造函数继承的优点。 - ...
本文将探讨JavaScript中对象的创建方式以及六种常见的继承模式,包括原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承以及寄生组合式继承。 首先,让我们从对象的创建开始谈起。在JavaScript中创建...
组合继承是结合了原型链和构造函数继承的方式,既保留了父类的属性,又能传递参数。子类的`prototype`指向父类的实例,同时在子类构造函数中调用父类构造函数。尽管解决了前面两种方式的缺点,但仍然存在性能上的...
首先,组合继承(也称伪经典继承)是结合了原型链继承和借用构造函数继承的两种方式,是目前JavaScript中最常用的继承方式之一。组合继承的核心在于利用原型链让子类的实例共享父类的方法,同时又通过构造函数来为...
在深入探讨JavaScript实现继承的具体机制之前,首先需要了解JavaScript本身的一些核心概念,包括函数、对象以及原型链。 JavaScript中的函数不仅可以用来定义行为,而且在ES6之前,函数还可以用来定义类。这与传统...
但是这种方法有一个问题,就是所有子类实例会共享从父类原型继承下来的属性,对于引用类型的属性,一个实例修改了该属性,其他实例也会受影响。 2. 构造函数继承(经典继承): 构造函数继承通过在子类的构造函数中...
在深入探讨JavaScript中继承...我们了解了原型链继承、构造函数继承以及如何通过原型链和构造函数组合实现继承。掌握了这些知识,我们就可以在JavaScript编程中灵活地使用继承,设计出更加模块化和易于管理的代码结构。
1. **原型链继承**:这是JavaScript最经典的继承方式,通过原型对象(`__proto__`或`Object.getPrototypeOf()`)将一个对象链接到另一个对象。当试图访问一个对象的属性时,如果该属性不存在,JavaScript会向上搜索...
4. **构造函数继承与原型链组合**: 这是一种常用的继承模式,也称为"经典继承"。子类的构造函数调用父类的构造函数(通常通过`call()`或`apply()`),同时子类的`prototype`被设置为父类的实例,以保持原型链的连续...
3. 继承方式:原型链继承、组合继承、寄生继承、原型式继承、寄生组合式继承、类式继承(ES6的class语法)等,理解它们的特点和适用场景。 三、闭包 闭包是一种特殊的函数,它可以访问并操作其外部作用域的变量,...
原型链允许对象间共享属性和方法,通过`__proto__`或`Object.getPrototypeOf`访问。构造函数的`prototype`属性创建了实例对象的原型,而`new`运算符用于创建实例并设置原型链。 ### 作用域链、上下文环境和闭包 ...
4. 对象与原型链:JavaScript的对象是一种键值对的集合,原型链则是实现继承的方式。案例中会讲解如何创建和操作对象,以及如何利用原型链实现对象间的继承。 5. DOM操作:JavaScript与HTML的交互主要通过DOM...
8. **对象与原型链**:JavaScript采用原型继承,每个对象都有一个原型(__proto__),可以通过`prototype`属性定义对象的方法,实现类的模拟。 9. **异步编程**:Promise、async/await等机制解决了JavaScript中的回...
原型链是实现继承的基础,通过原型链,子对象可以继承父对象的属性和方法。 4. **DOM操作**:JavaScript与HTML紧密相连,可以用于动态修改页面内容,如添加、删除、修改DOM元素,通过DOM API如getElementById、...
总的来说,JavaScript的继承机制是通过原型链实现的,可以通过不同的方式来实现子类对父类的继承,包括经典继承、改进的经典继承,甚至可以自定义`extend`方法来简化代码。理解这些实现方式对于编写可维护和高效的...
2. **基于原型**:对象可以通过原型链相互继承,允许创建复杂的对象结构。通过`__proto__`或`Object.getPrototypeOf`可以访问对象的原型。 3. **函数作为一等公民**:JavaScript中的函数可以被赋值给变量、作为参数...