既typeof之后的另一位老朋友!

prototype也是我们的老朋友,即使不了解的人,也应该都听过它的大名。如果它还是您的新朋友,我估计您也是javascript的新朋友。

在咱们的第一节(深入理解js原型和闭包(1)——一切皆是对象)中说道,函数也是一种对象。他也是属性的集合,你也可以对函数进行自定义属性。

不用等咱们去试验,javascript自己就先做了表率,人家就默认的给函数一个属性——prototype。对,每个函数都有一个属性叫做prototype。

这个prototype的属性值是一个对象(属性的集合,再次强调!),默认的只有一个叫做constructor的属性,指向这个函数本身。

如上图,SuperType是是一个函数,右侧的方框就是它的原型。

原型既然作为对象,属性的集合,不可能就只弄个constructor来玩玩,肯定可以自定义的增加许多属性。例如这位Object大哥,人家的prototype里面,就有好几个其他属性。

咦,有些方法怎么似曾相似?

对!别着急,之后会让你知道他们为何似曾相识。

接着往下说,你也可以在自己自定义的方法的prototype中新增自己的属性

 function Fn() { }
Fn.prototype.name = '王福朋';
Fn.prototype.getYear = function () {
return 1988;
};

没问题!

但是,这样做有何用呢? —— 解决这个问题,咱们还是先说说jQuery吧。

 var $div = $('div');
$div.attr('myName', '王福朋');

以上代码中,$('div')返回的是一个对象,对象——被函数创建的。假设创建这一对象的函数是 myjQuery。它其实是这样实现的。

  myjQuery.prototype.attr = function () {
//……
};
$('div') = new myjQuery();

不知道大家有没有看明白。

如果用咱们自己的代码来演示,就是这样

 function Fn() { }
Fn.prototype.name = '王福朋';
Fn.prototype.getYear = function () {
return 1988;
}; var fn = new Fn();
console.log(fn.name);
console.log(fn.getYear());

即,Fn是一个函数,fn对象是从Fn函数new出来的,这样fn对象就可以调用Fn.prototype中的属性。

因为每个对象都有一个隐藏的属性——“__proto__”,这个属性引用了创建这个对象的函数的prototype。即:fn.__proto__ === Fn.prototype

这里的"__proto__"成为“隐式原型”,下回继续分解。

---------------------------------------------------------------------------

本文已更新到《深入理解js原型和闭包》的目录更多内容可参考《深入理解js原型和闭包》

【学习笔记】深入理解js原型和闭包(3)——prototype原型的更多相关文章

  1. 微信小程序开发:学习笔记[7]——理解小程序的宿主环境

    微信小程序开发:学习笔记[7]——理解小程序的宿主环境 渲染层与逻辑层 小程序的运行环境分成渲染层和逻辑层. 程序构造器

  2. Python3+Selenium3+webdriver学习笔记13(js操作应用:弹出框无效如何处理)

    #!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记13(js操作应用:弹出框无效如何处理)'''from sel ...

  3. Python3+Selenium3+webdriver学习笔记12(js操作应用:滚动条 日历 内嵌div)

    #!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记12(js操作应用:滚动条 日历 内嵌div)'''from ...

  4. 【MarkMark学习笔记学习笔记】javascript/js 学习笔记

    1.0, 概述.JavaScript是ECMAScript的实现之一 2.0,在HTML中使用JavaScript. 2.1 3.0,基本概念 3.1,ECMAScript中的一切(变量,函数名,操作 ...

  5. 我的学习笔记之node----node.js+socket.io实时聊天(1) (谨此纪念博客开篇)

    本想着从hello word开篇,也确实写了相关学习笔记.各种原因吧,现在又着急写出作品,便作罢. 这里将记录一个node.js+socket.io的实时聊天程序.(当然我也是跟着网上各种教程资料学习 ...

  6. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

  7. 《DOM Scripting》学习笔记-——第二章 js语法

    <Dom Scripting>学习笔记 第二章 Javascript语法 本章内容: 1.语句. 2.变量和数组. 3.运算符. 4.条件语句和循环语句. 5.函数和对象. 语句(stat ...

  8. javascript学习:闭包和prototype原型使用基础

    闭包 function Person(name) { this.Username = name; var Userage = 18; //通过这种方法可以模拟私有成员 //类似于private成员 t ...

  9. 我的学习笔记之node----node.js+socket.io实时聊天(1)

    本想着从hello word开篇,也确实写了相关学习笔记.各种原因吧,现在又着急写出作品,便作罢. 这里将记录一个node.js+socket.io的实时聊天程序.(当然我也是跟着网上各种教程资料学习 ...

  10. node.js day01学习笔记:认识node.js

    Node.js(JavaScript,everywhere) 1.Node.js 介绍 1.1. 为什么要学习Node.js 企业需求 + 具有服务端开发经验更好 + front-end + back ...

随机推荐

  1. vim使用手册出现 找到 tag:1/9或更多 查看别的定义的方法

    :ts 或 tselect 查看有相同地方的定义 通过这种方式会出现一个列表,输入:q 然后通过数字键和回车查看某一个定义,个人经常用:ts :tn或tnext 查找下一个定义地方. :tp 查找上一 ...

  2. adb client, adb server, adbd原理浅析(附带我的操作过程)【转】

    本文转载自:http://blog.csdn.net/stpeace/article/details/24933813 adb是什么? adb就是Android调试桥,很形象啊. 先来看adb原理的逻 ...

  3. bzoj3134: [Baltic2013]numbers

    稍微用脑子想一想,要是一个回文数,要么s[i]==s[i+1]要么s[i]==s[i+2]就可以实锤了 所以多开两维表示最近两位选的是什么数就完了 注意前导0 #include<cstdio&g ...

  4. 黑客技术 —— Linux 命令行

    很多和正则表达式 re 是一致的: 1. 修改上次执行的命令 删除多余部分: % grep fooo /var/log/auth.log % ^o % grep foo /var/log/auth.l ...

  5. spark api之一:Spark官方文档 - 中文翻译

    转载请注明出处:http://www.cnblogs.com/BYRans/ 1 概述(Overview) 2 引入Spark(Linking with Spark) 3 初始化Spark(Initi ...

  6. 树莓派Dietpi系统配置Dueros

    dietpi 系统安装alsa工具 安装依赖  sudo apt-get install python-dateutil  sudo apt-get install gir1.2-gstreamer- ...

  7. Django中的Ajax详解

    AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当 ...

  8. CentOS Linux自动备份MySQL数据库到远程FTP服务器并删除指定日期前的备份Shell脚本

    说明: 我这里要把MySQL数据库存放目录/var/lib/mysql下面的pw85数据库备份到/home/mysql_data里面,并且保存为mysqldata_bak_2011_11_03.tar ...

  9. ORACLE PL/SQL 实例精解之第四章 条件控制:if 语句

    4.1 IF 语句 IF语句两种形式:IF-THEN IF-THEN-ELSE 使用IF-THEN,可以指定需要执行的一组动作. IF-THEN-ELSE语句指定两组动作 1. IF-THEN TRU ...

  10. rbenv更新ruby后rails命令无效的解决方案

    创建: 2017/11/02 更新: 2018/02/02 增加rbenv使用方法的链接     rbenv的使用: http://www.cnblogs.com/lancgg/p/8281739.h ...