【Javascript 拾遗之二】prototype 原型

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

prototype 原型

1、定义

Javascript中有两种容易混淆的类型, function 和 object, 有很多朋友认为他们是一种类型,或是无法分清。我们先来看一下什么时候是function什么时候是object。

var fun1 = function(){
    alert(‘prototype‘);
}
alert(typeof fun1); // function
var fun1O = new fun1(); // prototype
alert(typeof fun1O); // object

一个函数声明好之后他只是在静态内存中,它的类型是function的,使用new 关键字后,function就转换成了object类型,只有对象可以调用其中的方法和属性。

接下来我们来看一下prototype的定义和用法:

prototype是一个原型对象,什么叫“原型对象”呢?其实就是当这个方法传变成对象时,原型对象就会初始化(并且这个对象中的属性和方法都被激活,直接可被对象调用)相当于protoype对象写在一个类的构造函数里,实例化这个类时,构造函数里的对象就被初始化了。虽然javascript没有类的概念,但是你可以把函数看成是一个简单的类来理解。看以下例子:

function People(name)
{
 // People.prototype.name = ‘xxx‘
 console.warn(People.prototype);
}
console.warn(People);
console.warn(People.prototype);
People.prototype = {
        name : ‘aaa‘,
        method : function(){
             return ("My name is aaa!");
         }
}
var o = new People();
console.warn(o.name);
console.warn(o.method());

//People(name) 是一个简单的函数
//People {} 通过New关键字后,是一个对象
//Object { name="aaa", method=function()} 原型对象
//aaa 调用对象属性
//My name is aaa! 调用对象方法

对象内部prototype的结构是这样的:注意它的Dom结构。

window.People.constructor.prototype = {

  name : ‘aaa‘,

  method : function(){

    ...

  }

}

2、应用

-原型函数扩展

通常我们想扩展一个Javascript标准对象的方法可以用这样的方法:(ex.给数组添加一个in_array()的方法,判断某个值是否在这个数组中)

这样的调用Array.prototype.in_array,我们发现Array也是一个函数,或者你可以把它看成一个‘类’,我们通过prototype这个属性添加了它的一个源生方法。

如果修改Array.prototype.push,那么将会修改Array默认的push方法,这样做是不建议的。

Array.prototype.in_array = function(e) {
    for (var i = 0, l = this.length; i < l && this[i] != e; i++)
        ;
    return !(i == this.length);
}console.warn([1,2,3,4,5],in_array(3));//true

-继承

一个简单的A集成B的例子。这种继承方法比较old style了,现在流行的框架中一般都使用对象字面量的属性复制和拷贝,很少用这种方式,因为这种方式效率比较低。在此只做了解和学习。

var A = function(){}
var B = function(){
    return {
        name : ‘b‘,
        method : function(){
            alert(‘I\‘m b‘);
        }
    }
}
A.prototype =  new B();
var a = new A();
alert(a.name);
a.method();

3、总结

本文简单地介绍了prototype属性的定义和用法,其实也不用把它想得非常深奥和复杂,想想JAVA或是C++中的构造函数,就很容易明白它的用途了,说明白点prototype就是为Javascript类函数提供了一个修改属性和方法的接口,在实例化时,这些定义的属性和方法会赋予实例化后对象,以供对象调用。

时间: 2024-07-31 11:18:37

【Javascript 拾遗之二】prototype 原型的相关文章

Javascript讲解系列之一 Prototype原型链

以前没有写博客的习惯,许多的技术积累都是自己稍微总结一下,很少共享,并非自私,而是工作比较忙,前几天接到一个电话面试不理想,才发现公司所用的DOJO并不被外面广泛接受,故而决定把自己所学分享出来,为夯实基础,也为与外界交流思想,形成一种渠道,如需联系,请发送至邮箱:[email protected]. 今天写Javascript系列之第一篇:Prototype原型链.在软件园里随便拉一个码农估计都会写JS,大部分也知道JS是基于原型的语言,但是如果问及JS原生对象(Object,Function

【JavaScript 封装库】Prototype 原型版发布!

1 /* 2 源码作者: 石不易(Louis Shi) 3 联系方式: http://www.shibuyi.net 4 =================================================================================================== 5 程序名称: JavaScript 封装库 Prototype 版 6 迭代版本: 无 7 功能总数: 14 个 8 功能介绍: 9 1. 实现代码连缀 10 2. id /

JavaScript oop proto与prototype原型图

[_proto_与prototype] 1.prototype(函数的原型):函数才有prototype.prototype是一个对象,指向了当前构造函数的引用地址. 2._proto_(对象的原型对象):所有对象都有_proto_属性.当用构造函数实例化一个对象时,会将新对象的_proto_属性指上构造函数的prototype. zhangsan._proto_==Person.prototype 所有对象,最终都会指向Object()的prototype [原型链] 1.通过构造函数 new

JavaScript 面向对象 (prototype 原型模式)

一. JavaScript 设计思想 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.这是历史上第一个比较成熟的网络浏览器,轰动一时.但是,这个版本的浏览器只能用来浏览,不具备与访问者互动的能力.比如,如果网页上有一栏"用户名"要求填写,浏览器就无法判断访问者是否真的填写了,只有让服务器端判断.如果没有填写,服务器端就返回错误,要求用户重新填写,这太浪费时间和服务器资源了. 因此,网景公司急需一种网页脚本语言,使得浏览器可以与网页互动.工程师_Brend

javascript构造函数.prototype原型理解 函数.call() 方法克隆的理解

直接创建object对象 var stu = new Object(); 或 var stu = {}; stu.name="zhangsan"; stu.age = "18"; stu.fun = function(){ alert("我叫张三"); } 你也可以用讲stu当作一个模块,模块里面有多个对象,如下实例为一个简单的购物车系统的模块!var shoppingCar = {} shoppingCar.carInfo = function

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

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

JavaScript学习--Item15 prototype原型和原型链详解

用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了,最近看了一些 JavaScript高级程序设计,终于揭开了其神秘面纱. 每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性,也就是说将函数用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和

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

打好基础:了解prototype原型链

一.什么是prototype 在创建构造函数时,如果在函数内进行变量声明,声明的将是私有变量,外部无法访问.会使用this来进行实例变量和函数的声明,以保证通过使用该构造函数来声明的对象可以调用这些变量和函数.然而生命实例函数会在每次新建一个对象时都复制一个一模一样的函数到栈空间,十分浪费资源.prototype可以帮助我们解决这个问题,每个构造函数都有一个原型对象,同时都有一个prototype属性,这个属性指向构造函数的原型对象,它被用来实现基于原型的继承和共享.prototype在该变量内