深入理解javascript原型和闭包(3)——prototype原型

转载于http://www.cnblogs.com/wangfupeng1988/p/3978131.html

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

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

在咱们的第一节(深入理解javascript原型和闭包(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__"成为“隐式原型”,下回继续分解。

时间: 2024-10-19 09:39:21

深入理解javascript原型和闭包(3)——prototype原型的相关文章

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

闭包 function Person(name) { this.Username = name; var Userage = 18; //通过这种方法可以模拟私有成员 //类似于private成员 this.setAge = function (age) { Userage = age; } //类似于public成员 this.getAge = function () { return Userage; } } var p1 = new Person("huahuah"); p1.s

【Javascript 拾遗之二】prototype 原型

在开发中, 使用到一些Javascript框架, 如Jquery, Ext-js, Jquery-UI, EasyUI等,通常会看到一些开源代码中有prototype的身影.那么prototype究竟是什么呢?在oo前端开发中到底哪些应用呢?从软件工程的角度而言,能解决什么问题?接下来我们就一起来讨论一下prototype关键字在Javascript语言中的神奇之处.   prototype 原型 1.定义 Javascript中有两种容易混淆的类型, function 和 object, 有很

javascript的oop——>>> [__proto__ 与 prototype/原型链/原型属性与原型方法/for-in循环]

  前  言  OOP  javascript的oop中的__proto__  与  prototype/原型链/原型属性与原型方法/for-in循环 1  __proto__  与  prototype/原型链   1.prototype(函数的原型):函数才有prototype.prototype是一个对象,指向了当前构造函数的引用地址呢.                       2.__proto__(对象的原型对象):所有对象都要__proto__属性.当用构造函数实例化(new)一

理解JavaScript中的闭包

闭包的定义最初是来自一些学习资料上的说明,比如说闭包的意思是封闭包围,用于模拟一个私有变量的访问,通过成员函数的返回,才能访问成员变量//我可能说的跟C#一样了 囧 先来看几个例子吧 var func = function(n,c){//这个函数创建一个对象 var name =n;//成员变量 var classnum = c; return {//Json的写法, 返回一个对象 访问这个对象外部的变量 _getName:function(){ return name; }, _setName

深刻理解JavaScript基于原型的面向对象

主题一.原型 一.基于原型的语言的特点 1 只有对象,没有类;对象继承对象,而不是类继承类. 2  "原型对象"是基于原型语言的核心概念.原型对象是新对象的模板,它将自身的属性共享给新对象.一个对象不但可以享有自己创建时和运行时定义的属性,而且可以享有原型对象的属性. 3 除了语言原生的顶级对象,每一个对象都有自己的原型对象,所有对象构成一个树状的层级系统.root节点的顶层对象是一个语言原生的对象,其他所有对象都直接或间接继承它的属性. 显然,基于原型的语言比基于类的语言简单得多,我

彻底理解Javascript原型继承

彻底理解Javascript原型继承 之前写过一篇Javascript继承主题的文章,这篇文章作为一篇读书笔记,分析的不够深入. 本文试图进一步思考,争取彻底理解Javascript继承原理 实例成员与原型成员 举一个<高性能Javascript>书中例子 var book={ title :"High Performance JavaScript", publisher:"Yahoo!Press" }; alert(book.toString());/

《JavaScript 闯关记》之原型及原型链

原型链是一种机制,指的是 JavaScript 每个对象都有一个内置的 __proto__ 属性指向创建它的构造函数的 prototype(原型)属性.原型链的作用是为了实现对象的继承,要理解原型链,需要先从函数对象.constructor.new.prototype.__proto__ 这五个概念入手. 函数对象 前面讲过,在 JavaScript 里,函数即对象,程序可以随意操控它们.比如,可以把函数赋值给变量,或者作为参数传递给其他函数,也可以给它们设置属性,甚至调用它们的方法.下面示例代

理解 JavaScript 中的 this

前言 理解this是我们要深入理解 JavaScript 中必不可少的一个步骤,同时只有理解了 this,你才能更加清晰地写出与自己预期一致的 JavaScript 代码. 本文是这系列的第三篇,往期文章: 理解 JavaScript 中的作用域 理解 JavaScript 中的闭包 什么是 this 消除误解 在解释什么是this之前,需要先纠正大部分人对this的误解,常见的误解有: 指向函数自身. 指向它所在的作用域. 关于为何会误解的原因这里不多讲,这里只给出结论,有兴趣可以自行查询资料

理解javascript 对象,原型对象、闭包

javascript作为一个面向对象的语言,理解 对象.原型.闭包.模块模式等技术点对于成为一名合格的javascript程序员相当重要,多年没写过blog,今天就先拋个玉,在下基本也不做前端,但颇感兴趣,愿意和大家一起学习.此篇只是对自己认为的比较重要的知识点进行了说明,连贯性不是特别好,大家共同进步. 注意:文中中文并非英文翻译,只是个人理解. 理解面向对象 对象(object) An object is a collection of properties and has a single