HTML 学习笔记 JavaScript (prototype)
原博地址:http://www.cnblogs.com/dolphinX/p/3286177.html
原博客的作者是一个非常牛逼的前端大神,我作为一个初学者,在此借助大神的博客进行自己的学习。在这里感谢原作者无私的分享。也强烈建议大家到原作者的博客下学习。好了,现在让我们跟着大神的脚步前进吧。
用过JavaScript的人肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都有一个prototype属性,可以为其添加函数供实例访问,其他的就不清楚了,下面我们就跟着大神的脚步,来揭开其神秘的面纱吧。
每个函数都有一个prototype属性,这个属性指向一个对象的引用。这个对象称为原型对象,原型对象包含实例共享的方法和属性,也就是说将函数用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和方法。
私有变量 函数
在具体说prototype前说几个相关的东西,可以更好的里脊prototype的设计意图。首先说一下函数的作用域,在函数內定义的变量和函数如果不对外提供接口,那么外部将无法访问到,也就是变为私有变量和私有函数。
function Obj(){
var a=0; //私有变量
var fn=function(){ //私有函数 }
}
这样在函数对象obj外部无法访问的变量a和函数fn,它们就是私有的,只能在Obj内部访问,即使是函数Obj的实例也无法访问这些变量和函数。
var o=new Obj();
console.log(o.a); //undefined
console.log(o.fn); //undefined
静态变量 函数
当定义一个函数后,通过“.”为其添加函数和属性,通过对象本身仍然可以访问得到,但是其实例却访问不到,这样的函数和变量分别被称为静态函数和静态变量。
function Obj() { }
Obj.a = 0;//静态变量
Obj.fn = function() {//静态函数 } alert(Obj.a);//0
console.log(Obj.fn);//function var o = new Obj();
console.log(o.a);//undefined
console.log(o.fn);//undefined
实例变量 函数
在面向对象编程中除了一些库函数我们还是希望在对象定义的时候同时定义一些属性和方法,实例化后可以访问,JavaScript也能做到这样。
function Obj() {
this.a = [];//实例变量
this.fn = function() {
//实例方法
}
}
console.log(typeof Obj.a);//undefined
console.log(typeof Obj.fn);//undefined var o = new Obj();
console.log(typeof o.a); //object
console.log(typeof o.fn);//function
这样可以达到上述目的,然而
function Obj() {
this.a = [];//实例变量
this.fn = function() {
//实例方法
}
}
var o = new Obj();
o.a.push(1);
o.fn = {};
console.log(o.a); //Array [ 1 ]
console.log(typeof o.fn);//object var o2 = new Obj();
console.log(o2.a);//Array [ ]
console.log(typeof o2.fn);//function
上面的代码完全符合预期,但同时也说明一个问题,在o中修改了a和fn,而o2中没有改变,由于数组和函数都是对象,是引用类型,这就说明o1中的属性和方法与o2中的属性与方法虽然同名但却不是一个引用。而是对Obj对象定义的属性和方法的一个复制。
这个对属性来说没有什么问题,但是对于方法来说问题就很大了,因为方法都是在做完全一样的功能,但是却又有两份复制,如果一个函数对象有上千的实例方法,那么他的实例都要保持一份上千方法的复制,这显然是不科学的,那么该怎么办呢?prototype应运而生。
prototype
无论什么时候 只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,默认情况下prototype属性会默认获得一个constructor(构造函数)属性,这个属性是一个指向prototype属性所在函数的指针。
function Person(){ }
根据上图可以看出Person对象会自动获得prototype属性,而prototype也是一个对象,会自动获得一个constructor属性,该属性正是指向Person对象。
当调用构造器函数创建一个实例的时候,实例内部包含一个内部指针(很多浏览器这个指针名字为_proto_),指向构造函数的prototype属性,这个链接存在于实例和构造函数的prototype之间,而不是实例和构造函数之间。
function Person(name) {
this.name = name;
}
Person.prototype.printName = function() {
alert(this.name);
} var person1 = new Person("tian");
var person2 = new Person("lian");
Person的实例person1中包含了name属性,同时自动生成一个_proto_属性,该属性只想Person的prototype。可以访问prototype内部的PrintName方法,大概是这个样子的
写段程序测试一下看看prototype内属性、方法是能够共享
function Person(name) {
this.name = name;
}
Person.prototype.share = [];
Person.prototype.printName = function() {
alert(this.name);
} var person1 = new Person("tian");
var person2 = new Person("lian");
person1.share.push(1);
person2.share.push(2);
console.log(person2.share);//Array [ 1, 2 ]
果不其然!实际上当代码读取某个对象的某个属性的时候,都会执行一遍搜索,目标是具有给定名字的属性,搜索首先从对象实例开始,如果在实例中找到该属性则返回,如果没有则查找prototype,如果还是没有找到则继续递归prototype的prototype对象,直到找到为止,如果递归到object仍然没有则返回错误。同样道理如果在实例中定义如prototype同名的属性或函数,则会覆盖prototype的属性或函数。
function Person(name){
this.name=name;
} Person.prototype.share=[]; var person=new Person('Byron');
person.share=0; console.log(person.share); //0而不是prototype中的[]
构造简单的对象
当然prototype不是为专门为解决上面的问题而定义的,但是却解决了上面的问题。了解了这些知识就可以构建一个科学的,复用率高的对象,如果希望实例对象的属性或函数能复用就定义到prototype中,如果希望每个实例单独拥有属性或方法,则定义到this中,可以通过构造函数传递实例化参数。
function Person(name) {
this.name = name;
}
Person.prototype.share = [];
Person.prototype.printName = function() {
alert(this.name);
}
prototype 属性中的数据 类似于 iOS中static 修饰的全局变量 只初始化一次,本文件共用,一变具变。再次感谢原博客的大神。嘿嘿。
HTML 学习笔记 JavaScript (prototype)的更多相关文章
- [前端JS学习笔记]JavaScript prototype 对象
一.概念介绍 prototype 对象 : 原型对象.在JavaScript中, 每一个对象都继承了另一个对象,后者称为"原型对象". 只有 null 除外,它没有自己的原型对象. ...
- 学习笔记---Javascript事件Event、IE浏览器下的拖拽效果
学习笔记---Javascript事件Event.IE浏览器下的拖拽效果 1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcE ...
- HTML 学习笔记 JavaScript(面向对象)
现在让我们继续跟着大神的脚步前进 学习一下JavaScript中的面向对象的思想,其实作为一个iOS开发者,对面向对象还是比较熟悉的,但是昨晚看了一下Js中的面向对象,妈蛋 一脸萌比啊.还好有大神.让 ...
- [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡
当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...
- HTML 学习笔记 JavaScript(创建对象)
原博地址:http://www.cnblogs.com/dolphinX/p/3288118.html JavaScript 有Date Array String等这样的内置对象,功能强大实用简单,但 ...
- Javascript学习笔记--理解prototype
prototype和closure是js中两个不好搞懂的概念,幸好网上有很多相关的文章,在网上查了一遍以后,总是是觉得有点理解了.今天先说说prototype. 之前一直被ajax in action ...
- HTML 学习笔记 JavaScript(数组)
1.数组的创建 var arrayObj = new Array(); //创建一个数组var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是 ...
- -高级Javascript编程学习笔记----Javascript编程及架构设计最应该注意的基本点
最小全局变量 JavaScript通过函数管理作用域.在函数内部生命的变量只在这个函数内部,别的地方不可用.全局变量是指在函数外或是未声明直接简单使用的.每个Javascipt环境有一个全局对象,当你 ...
- JS学习笔记——JavaScript继承的6种方法(原型链、借用构造函数、组合、原型式、寄生式、寄生组合式)
JavaScript继承的6种方法 1,原型链继承 2,借用构造函数继承 3,组合继承(原型+借用构造) 4,原型式继承 5,寄生式继承 6,寄生组合式继承 1.原型链继承. <script t ...
随机推荐
- 【PHP资源】PHP 资源大全
看到这篇文章不错,转来收藏 依赖管理 依赖和包管理库 Composer/Packagist:一个包和依赖管理器 Composer Installers:一个多框架Composer库安装器 Pickle ...
- Maven学习随笔一——Maven安装报错处理(mvn -v, 提示不是内部命令的问题)
今天心血来潮学习maven,可是光安装就花了个把小时,好坑有木有! 安装过程可百度,各种经贴,不详. 控制台输入 mvn -v ,如果报错,很可能是你的java/maven的环境变量配置出了点问题: ...
- 提交留言HTML模板代码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- Windows 10 的音频和 MIDI API将统一
微软一统 Windows 10 的音频和 MIDI API 微软在夏季NAMM上的A3E大会上做了主题演讲,他们对Windows 10的音频和MIDI API都做了新的规划,开发者针对Windows ...
- JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案
1. 设置屏幕适配策略(Resolution Policy) 如果你还没有用过Resolution Policy,只需要在游戏载入过程完成之后(cc.game.onStart函数回调中),调用下面的代 ...
- arcgis server10.2.2的安装步骤过程
1.找到ArcGIS Server软件包目录下的esri.exe,打开运行,选择安装ArcGIS for Server,见下图: 2.确定之后,会弹出让用户输入用户名和密码的界面,这个可以自己定义,但 ...
- SharePoint 2013 图文开发系列之自定义字段
SharePoint使用的优势,就在于开箱即用.快速搭建,SharePoint自身为我们提供了很多字段类型,已经很丰富了.但是,在实际应用中,我们还需要一些功能特殊的字段,下面,我们简单介绍下字段的开 ...
- [Android]对MVC和MVP的总结
以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/5036289.html 经历过的客户端的架构分为这么几个阶段: ...
- IOS开发之支付功能概述
前言:本随笔将对IOS开发的支付功能进行一个概述. 内容大纲: 一.常见的支付方案简介 二.第三方支付SDK 三.苹果官方支付方案 四.Web支付方案 正文: 一.常见的支付方案简介 在微信支付中 微 ...
- Java 内部类的阐述
创建一个Computer抽象类:用来在Test类中创建匿名抽象类 package com.zhiyou; public abstract class Computer { int a = 1; /** ...