- 浏览: 1092029 次
文章分类
- 全部博客 (379)
- S2SH (16)
- stuts2 (0)
- java语言 (81)
- JSP (17)
- <html>元素 (11)
- javaweb (4)
- web容器 (3)
- ext (23)
- javaScript (48)
- ant (1)
- liferay (1)
- sql (9)
- css (42)
- 浏览器设置 (3)
- office_world (1)
- eclipse (4)
- 其它 (28)
- 操作系统 (5)
- android (6)
- Struts2 (11)
- RegEx (3)
- mysql (5)
- BigDATA (1)
- Node.js (1)
- Algorithm (10)
- Apache Spark (1)
- 数据库 (5)
- linux (2)
- git (1)
- Adobe (3)
- java语言,WebSocket (1)
- Maven (3)
- SHELL (1)
- XML (2)
- 数学 (2)
- Python (2)
- Java_mysql (1)
- ReactJS (6)
- 养生 (4)
- Docker (1)
- Protocols (3)
- java8 (2)
- 书籍 (1)
- Gradle (2)
- AngularJS (5)
- SpringMVC (2)
- SOAP (1)
- BootstrapCSS (1)
- HTTP协议 (1)
- OAuth2 (1)
最新评论
-
Lixh1986:
Java并发编程:自己动手写一把可重入锁https://blo ...
Java之多线程之Lock与Condition -
Lixh1986:
http://win.51apps.com.cn/https: ...
temp -
ztwsl:
不错,支持很好
HttpServletRequest和ServletRequest的区别 -
guodongkai:
谢谢您能将知识精华汇编总结,让初学者们从原理中学会和提高。
javaScript之function定义 -
kangwen23:
谢谢了,顶顶
struts2中的ValueStack学习
前文讲到“属性继承”所存在的问题:重复。本文专注于“原型(prototype)继承”。
背景知识:什么是函数的 prototype 属性?
函数在定义(创建)时,会自动被添加一个 prototype 属性。
1、prototype 属性是一个空对象 {},然后被添加了一个 constructor 属性,指向函数自身。
2、prototype 属性被函数(使用 new 操作符生成)的实例共享。
3、在访问函数实例的某个属性时,如果该属性不存在,则向其 __proto__ 属性中寻找,如果仍然不存在则向其 __proto__ 属性的 __proto__属性中寻找,直至根。
再补充一句:constructor 的意义?
由于
1) constructor 属性,指向函数自身。
2) prototype 属性被函数的实例共享。
3) constructor 属性是 prototype 的一部分。
所以函数的各个实例便可以通过 constructor 属性确定,它们来自于同一个构造函数。
一、继承其它函数的 prototype 属性
函数 A(即将要被创建)的 prototype 属性是空的,未被使用的。
函数 B 的 prototype 属性将被函数 A 继承。
有以下方案:
1、直接引用函数 B 的 prototype 对象作为函数 A 的 prototype 对象
问题:
1) 如果函数 A 修改 prototype 对象,会直接影响到函数 B。
如果函数 B 的 prototype 属性又被函数 C 引用,则会出现修改冲突和混乱。
2) 函数 A 的与函数 B 共享一个 prototype ,共享一个 prototype.constructor
这显然不对。
2、new 一个其它函数的实例,把它赋值给新函数的 prototype 属性
函数的 prototype 属性不就是一个对象吗(虽然具有特定的 constructor 属性)?
那我们给它一个好了。
问题:
1) 我们只是关心继承其它函数的 prototype 属性,而非this属性。
当使用 new 操作符时,无疑增加了不必要的原函数的 this 属性。
注意:
1) 新生成的其它函数的实例,没有 constructor 属性(虽然其 __proto__ 中有),
但这不是我们想要的。正好手动为其添加一个 constructor 属性,指向新函数自身。
3、“方法 2”的扩展
方法 2 在功能上已经实现了我们想要的。只是多了不必要的父类中this对象中的属性。
那好,只需去掉 this 对象(或只抽取其 prototype 对象)即可。
借助于空函数 F(){} 和修改 F 的 prototype,
我们构造了一个只含有 Animal 的 prototype 属性的“简洁的 Animal”:F 。
将上述方法封装为一个函数:
结语:
原型继承又叫方法函数继承。
因为我们通常把有用的方法写到函数的 prototype 属性中。
属性继承又叫this属性继承。
它主要是通过传递this的引用给其它函数,而使this具有额外的属性。
—————————————
javascript 函数基础系列文章
1、JavaScript之变量的作用域
2、javascript之变量类型与变量声明及函数变量的运行机制
3、javaScript之function定义
4、javascript之function的prototype对象
5、javascript之function的(closure)闭包特性
6、javascript之function的this
7、javascript之function的apply(), call()
___________
javascript 面向对象编程系列文章:
1、javaScript之面向对象编程
2、javascript之面向对象编程之属性继承
3、javascript之面向对象编程之原型继承
-
-
转载请注明,
原文出处:http://lixh1986.iteye.com/blog/2348442
-
背景知识:什么是函数的 prototype 属性?
函数在定义(创建)时,会自动被添加一个 prototype 属性。
1、prototype 属性是一个空对象 {},然后被添加了一个 constructor 属性,指向函数自身。
2、prototype 属性被函数(使用 new 操作符生成)的实例共享。
3、在访问函数实例的某个属性时,如果该属性不存在,则向其 __proto__ 属性中寻找,如果仍然不存在则向其 __proto__ 属性的 __proto__属性中寻找,直至根。
// function F(){} //test console.log(F == F.prototype.constructor); // true //
// function F(){} F.prototype.title = "hello"; //test var f1 = new F(); var f2 = new F(); console.log(f1.title); // hello console.log(f2.title); // hello //
再补充一句:constructor 的意义?
由于
1) constructor 属性,指向函数自身。
2) prototype 属性被函数的实例共享。
3) constructor 属性是 prototype 的一部分。
所以函数的各个实例便可以通过 constructor 属性确定,它们来自于同一个构造函数。
一、继承其它函数的 prototype 属性
函数 A(即将要被创建)的 prototype 属性是空的,未被使用的。
函数 B 的 prototype 属性将被函数 A 继承。
有以下方案:
1、直接引用函数 B 的 prototype 对象作为函数 A 的 prototype 对象
function Animal(){} function Dog(){}; Dog.prototype = Animal.prototype; //test var dog = new Dog(); console.log(dog.constructor == Dog ); // false
问题:
1) 如果函数 A 修改 prototype 对象,会直接影响到函数 B。
如果函数 B 的 prototype 属性又被函数 C 引用,则会出现修改冲突和混乱。
2) 函数 A 的与函数 B 共享一个 prototype ,共享一个 prototype.constructor
这显然不对。
2、new 一个其它函数的实例,把它赋值给新函数的 prototype 属性
函数的 prototype 属性不就是一个对象吗(虽然具有特定的 constructor 属性)?
那我们给它一个好了。
// function Animal(){} Animal.prototype.type = "Animal"; function Dog(){}; //1. var dog_constructor = Dog.prototype.constructor; //2. Dog.prototype = new Animal(); //3. Dog.prototype.constructor = dog_constructor; //4. dog_constructor == Dog // true var animal = new Animal(); Dog.prototype = animal; Dog.prototype.constructor = Dog; //test var dog = new Dog(); console.log(dog.constructor == Dog ); // true console.log(dog.type == "Animal" ); // true //
问题:
1) 我们只是关心继承其它函数的 prototype 属性,而非this属性。
当使用 new 操作符时,无疑增加了不必要的原函数的 this 属性。
注意:
1) 新生成的其它函数的实例,没有 constructor 属性(虽然其 __proto__ 中有),
但这不是我们想要的。正好手动为其添加一个 constructor 属性,指向新函数自身。
3、“方法 2”的扩展
方法 2 在功能上已经实现了我们想要的。只是多了不必要的父类中this对象中的属性。
那好,只需去掉 this 对象(或只抽取其 prototype 对象)即可。
// function Animal(){} function Dog(){}; Animal.prototype.type = "Animal"; function F(){}; F.prototype = Animal.prototype; Dog.prototype = new F(); Dog.prototype.constructor = Dog; //test var dog = new Dog(); console.log(dog.constructor == Dog ); // true console.log(dog.type == "Animal" ); // true //
借助于空函数 F(){} 和修改 F 的 prototype,
我们构造了一个只含有 Animal 的 prototype 属性的“简洁的 Animal”:F 。
将上述方法封装为一个函数:
Function.prototype.extendPrototypeFrom = function(Parent){ var constructor = this.prototype.constructor; function F (){}; F.prototype = Parent.prototype; this.prototype = new F(); this.prototype.constructor = constructor; }
//test function Animal(){} function Dog(){}; Animal.prototype.type = "Animal"; Dog.extendPrototypeFrom(Animal); //test var dog = new Dog(); console.log(dog.constructor == Dog ); // true console.log(dog.type == "Animal" ); // true
结语:
原型继承又叫方法函数继承。
因为我们通常把有用的方法写到函数的 prototype 属性中。
属性继承又叫this属性继承。
它主要是通过传递this的引用给其它函数,而使this具有额外的属性。
—————————————
javascript 函数基础系列文章
1、JavaScript之变量的作用域
2、javascript之变量类型与变量声明及函数变量的运行机制
3、javaScript之function定义
4、javascript之function的prototype对象
5、javascript之function的(closure)闭包特性
6、javascript之function的this
7、javascript之function的apply(), call()
___________
javascript 面向对象编程系列文章:
1、javaScript之面向对象编程
2、javascript之面向对象编程之属性继承
3、javascript之面向对象编程之原型继承
-
-
转载请注明,
原文出处:http://lixh1986.iteye.com/blog/2348442
-
发表评论
-
Javascript 测试框架之 隐式声明 之 describe
2019-06-25 15:26 2449为什么使用 javascript 测试框架时,没有显式导入 d ... -
JavaScript之ECMAScript6新特性之_03_箭头函数(Arrow Function)
2018-01-25 13:46 1052一、简介 箭头函数(Arrow Function)是 ES6 ... -
JavaScript之ECMAScript6新特性之_02_线程异步阻塞: Promise, Async / await
2018-01-12 16:51 2255刚出来不久的 ES8 包含了 async 函数,它的出现,终于 ... -
JavaScript之ECMAScript6新特性之_01_开篇
2017-08-17 02:54 561点此查看全部: http://es6-features.org ... -
jQuery Versions - browser support
2017-08-12 04:19 1553jQuery 3.2.1 Support Deskto ... -
基于HTML5实现的中国象棋游戏
2017-06-24 02:24 1626HTML5实现中国象棋游戏 http://www.w2bc.c ... -
JavaScript之跨域请求解决方案
2017-06-07 11:03 3897浏览器处于安全原因,在使用 Ajax 进行请求访问时,不允许跨 ... -
JavaScript之 25 道面试题
2017-04-17 17:05 91325 Essential JavaScript Intervi ... -
JavaScript小应用之分页算法
2017-03-16 12:56 629效果图: function getPagina ... -
jQuery之empty() VS. remove()
2017-03-16 10:32 686jQuery empty() vs remove() Wh ... -
jQuery之 prop() VS. attr()
2017-03-14 16:43 624attr() 用于自定义属性,id ; prop() 用于 ... -
jQuery之mouseover,mouseover,mouseout,mouseleave
2017-03-14 10:20 619Jquery mouseenter() vs mouseove ... -
javascript之JS操作iframe
2017-02-28 14:56 2135JS操作iframe 1. 获得iframe的w ... -
HTML5之Cookie,localStorage 与 sessionStorage
2016-12-22 18:35 807详说 Cookie, LocalStorage 与 ... -
jquery之live(), delegate(), on() 方法
2016-11-26 23:48 882通过下面的一个实例理解 jQuery 的 live(), de ... -
javascript之小应用:网页在线聊天
2016-11-08 11:48 4213概览 这款使用 PHP 和 javascript 搭建的 ... -
javascript之编程序题目
2016-11-06 17:30 10031. 判断两个字符串是否:字母相同切长度相同(空格不算)。 ... -
javascript之面向对象编程之属性继承
2016-10-23 21:09 834函数继承可以分为两种:1、继承其 this 属性 2、继承其 ... -
javascript 之 undefined
2016-08-12 11:01 657一、用法 undefined 关键字有两种用法: 1. 如 ... -
javascript之 == vs ===
2016-06-12 15:59 623一、Comparison Overview 1. Speed ...
相关推荐
《JavaScript面向对象编程指南》内容包括:JavaScript作为一门浏览器语言的..., 《JavaScript面向对象编程指南》着重介绍JavaScript在面向对象方面的特性,展示如何构建强健的、可维护的、功能强大的应用程序及程序库。
JavaScript作为一门浏览器语言的核心思想;面向对象编程的基础知识及其在... 《JavaScript面向对象编程指南》着重介绍JavaScript在面向对象方面的特性,展示如何构建强健的、可维护的、功能强大的应用程序及程序库
面向对象编程的基础知识及其在JavaScript中的运用;数据类型、操作符以及流程控制语句;函数、闭包、对象和原型等概念,以代码重用为目的的继承模式;BOM、DOM、浏览器事件、AJAX和JSON;如何实现JavaScript中缺失的...
原型是理解继承概念的关键, 我们将会教你如何建立原型, 如何检测一个对象是否是另外一个对象的原型, 及其 JavaScript 的模型与Java 面向对象编程之间的区别。我们同样会向你展示如何检测对象所包含的各种属性的方法...
《JavaScript面向对象编程指南》内容包括:JavaScript作为一门浏览器语言的...《JavaScript面向对象编程指南》着重介绍JavaScript在面向对象方面的特性,展示如何构建强健的、可维护的、功能强大的应用程序及程序库。
《JavaScript面向对象编程指南》内容包括:JavaScript作为一门浏览器语言的...《JavaScript面向对象编程指南》着重介绍JavaScript在面向对象方面的特性,展示如何构建强健的、可维护的、功能强大的应用程序及程序库。
1.本书是唯一一本介绍JavaScript面向对象编程的图书。, 2.本书作者是知名的Web开发人员和作者。受到国内众多前端开发人员,如淘宝UED团队的推崇和推荐。 Stoyan Stefanov:Facebook公司工程师、作家、演说家。他经常...
由于JS不是纯的面向对象的语言,所以对象的继承是以原型函数的形式继承的,很多人刚开始接触的时候不太理解,但是JS这种以原型函数的形式实现面向对象技术,不仅是可行的,而且还为面向对象技术提供了动态继承的功能...
本人一行注释一行代码翻译了该大师的艺术作品--目的说明它是在第1,2阶段文档演示的JavaScript面向对象的书写方式的进一步改进,它是现代JavaScript面向对象编程方式(使用基本类来编码)的过渡代码--没有它就没有当今...
JavaScript面向对象编程指南 第2版 高清 带索引书签目录_样章.pdf,风格轻松易懂,比较适合初学者,原型那块儿讲得透彻,12种继承方式呢。
本文实例讲述了JavaScript面向对象程序设计中对象的定义和继承。分享给大家供大家参考,具体如下: 在面向对象的Javascript编程中,希望代码优雅有高效是非常重要的。javascript中不存在类的概念,只有对象。要想把...
风格轻松易懂,比较适合初学者,原型那块儿讲得透彻,12种继承方式等。
本文实例讲述了Javascript面向对象程序设计继承用法。分享给大家供大家参考,具体如下: 1.关于继承: 百度百科对继承的解释是:继承是指一个对象直接使用另一对象的属性和方法。 (话说百科对于计算机概念的继承的...