既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. RK3288 GPIO 输出问题【转】

    本文转载自:http://m.blog.csdn.net/jiangdou88/article/details/50158673 #define GPIO_BANK0              (0 ...

  2. Silverlight结合Web Service进行文件上传

    search了非常多的文章,总算勉强实现了.有许多不完善的地方. 在HCLoad.Web项目下新建目录Pics复制一张图片到根目录下. 图片名:Bubble.jpg 右击->属性->生成操 ...

  3. fuse的编译安装(Centos7-minimal)

    打算寒假在家跟着THU的一个分布式系统的课程:http://thu-cmu.cs.tsinghua.edu.cn/curriculum/dscourse/schedule.htm 第0个lab就是要在 ...

  4. 如何使用BMap.Point传递变量、存储数据?

    在开发中使用到了百度地图进行开发,用于展示企业位置.由于数据量庞大,如果使用marker,将会造成界面卡顿,处理慢的问题. 在查看百度地图API示例是发现了海量点这个东西,还别说对于大数量的点加载起来 ...

  5. 【前端】CentOS 7 系列教程之五: 安装最新版 nginx 并转发 node 服务

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/linux_5.html 进入/usr/local目录 cd /usr/local 下载最新版的ngxin压缩包 w ...

  6. ASP.NET Core:WebAppCoreReact

    ylbtech-ASP.NET Core:WebAppCoreReact 1.返回顶部 1. 2.   3.         4. 5. 6. 7. 2. wwwroot 返回顶部   3. Clie ...

  7. 详述IntelliJ IDEA插件的安装及使用方法(图解)

    intellij idea是一款非常优秀的软件开发工具,它拥有这强大的插件体系,可以帮助开发者完成很多重量级的功能.今天,我们来学习一下如何安装和卸载intellij idea的插件. Intelli ...

  8. list转json的一些问题

    利用JSONArray转换list 定义的model: package com.yds.model; import java.util.Date; public class DeviceHistory ...

  9. linux下sprintf_s函数的替代(转载)

    转自:http://www.cnblogs.com/yeahgis/archive/2013/01/22/2872179.html windows平台下线程安全的格式化字符串函数sprint_s并非标 ...

  10. Spring Cloud Alibaba基础教程:Sentinel Dashboard中修改规则同步到Nacos

    上一篇我们介绍了如何通过改造Sentinel Dashboard来实现修改规则之后自动同步到Apollo.下面通过这篇,详细介绍当使用Nacos作为配置中心之后,如何实现Sentinel Dashbo ...