JavaScript prototype属性深入介绍

每个函数创建时默认带有一个prototype属性,其中包含一个constructor属性,和一个指向Object对象的隐藏属性__proto__。constructor属性的值为该函数的对象。在一个函数前面加上new来调用,则会创建一个隐藏连接到该函数prototype成员的新对象(由__proto__属性来链接),同时函数的this将会被绑定到那个新对象上。
函数总是返回一个值;如果没有指定返回值,就返回undefined;如果当做构造函数来调用,且返回值不是对象,则返回this(该新对象);如果返回值是对象,则它作为构造函数是没有意义的!
[javascript]


代码如下:

function A(){
this.p = 'haha';
return {p:'heihei'};
}
var a = new A();
function A(){
this.p = 'haha';
return {p:'heihei'};
}
var a = new A();
alert(a.p);//显示'heihei',与var a = A();的效果一样

函数A内部直接调用一个函数B,B的this绑定到全局对象而不是其外部函数A,这是JS设计的一个错误。我们不得不用别的方式来解决这个问题,比如在A中用一个变量(通常是that)来保存A的this作用域的引用。
JS函数拥有一个length属性,表示函数定义时指定的形参的个数。
函数的arguments属性包含了调用函数时传入的所有参数,而不管函数的声明中是否定义了这些形参;arguments不是数组,只是一个“类似数组”的对象(在函数中运行arguments instanceof Array;返回false)。可以通过Array.prototype.slice.apply(arguments)将其转化为JS数组。
给JavaScript函数的原型增加方法(method),则所有的(构造)函数都可以用了!例如,可以给JS函数的构造者 Function 的原型增加一个method方法,则包括Object、Number等构造函数在内的所有函数都继承了该方法,这是很强大的:
[javascript]


代码如下:

Function.prototype.method = function(name, func){
this.prototype[name] = func;
return this;
};
Function.prototype.method = function(name, func){
this.prototype[name] = func;
return this;
};

这样,调用Object.method方法,就可以为所有的JS对象(包括Function对象)增加新的方法,调用Number.method方法,可以为所有的数值类型增加新的方法,下面一条就是这样的一个例子。 注意Object、Number等类型的对象此时并没有继承method方法。如果想达到这样的目的,可以运行类似下面的语句:
[javascript]


代码如下:

Object.method('method',Object.method);
Object.method('method',Object.method);

我们可以通过修改数值类型的原型,来给数值类型增加新的方法,这里我们借用上一条中提到的method方法来给Number的原型增加一个negative方法:
[javascript]


代码如下:

Number.method(negative,function(){
return 0–this;
})
Number.method(negative,function(){
return 0–this;
})

调用方法的时候稍微有一点绕。在JavaScript的语法中,数字后面直接跟点号,然后跟方法调用的语法是错误的;也就是说,3.negative()这样写是不对的。要想调用数值类型的方法,需要在数字后面加n个空格(n>=1),或者使用小括号将数字括起来,将其强制转化为表达式,然后再调用方法,或者干脆定义一个数值变量,也可以直接调用方法。也就是说,下面的写法都是正确的:
[javascript]
(3).negative();
3 .negative();
var n = 3; n.negative();
3['negative']();
(3).negative();
3 .negative();
var n = 3; n.negative();
3['negative']();
当使用函数表达式方法定义函数时,function后面的函数名可以用来递归地调用自己,并且这个名字不会被覆盖!我们来看下面的例子,
[javascript]


代码如下:

function a(n){
if(n>1)
return a(n-1)+1;
else
return 1;
};
function a(n){
if(n>1)
return a(n-1)+1;
else
return 1;
};

上述代码定义了一个函数a,并且其内部递归对自身进行了调用;现在我们用一个新的引用aa指向函数a,然后将原来的a改变,比如变为一个整数1,然后调用函数aa,如下面代码所示:
[javascript]


代码如下:

var aa = a;
a = 1;
aa(3);
var aa = a;
a = 1;
aa(3);

则控制台报错:TypeError: Property 'a' of object [object Window] is not a function;很显然,原来的递归函数已经被破坏了。关于这个问题,我们可以在函数a的内部,用arguments.callee.caller来代替a,或者用一个函数表达式来定义函数:
[javascript]


代码如下:

var b = function a(n){
if(n>1)
return a(n-1)+1;
else
return 1;
};
var bb = b;
a = 3;
bb(3);
var b = function a(n){
if(n>1)
return a(n-1)+1;
else
return 1;
};
var bb = b;
a = 3;
bb(3);

此时,bb函数能正确返回我们想要的结果。
为了提高JavaScript函数的封装性,我们可以定义函数化的构造器,下面是一个例子:


代码如下:

[javascript]
var funcCons = function(spec){
var that = {};
that.getName = function(){
return spec.name;
};
that.says = function(){
return spec.saying || '';
};
return that;
};
var myFunc = funcCons({name:'NearEast'});
var funcCons = function(spec){
var that = {};
that.getName = function(){
return spec.name;
};
that.says = function(){
return spec.saying || '';
};
return that;
};
var myFunc = funcCons({name:'NearEast'});

这样,我们可以在构造器中定义一些私有变量(如字典表)和函数,而不必把它们全部暴露在外面。

(0)

相关推荐

  • JavaScript中prototype为对象添加属性的误区介绍

    先上需要用到的全部代码片段(截取) 复制代码 代码如下: MenuControl.prototype.boxDisplay = false;//是否显示图层选择菜单 MenuControl.prototype.controlUI; MenuControl.prototype.show = function(){ if(pointControl.boxDisplay){ pointControl.hide(); } menuBoxDiv.style.display = ""; this.

  • JavaScript为对象原型prototype添加属性的两种方式

    复制代码 代码如下: <script type="text/javascript"> <!-- /* 给原型 prototype 添加属性的两种方式 */ //方式一 var myObj = function(){ this.study = "JavaScript"; } myObj.prototype.hobby = function() { this.hobby = "See girl"; } var newObj = ne

  • javascript中的prototype属性实例分析说明

    在Javascript中,一切都是对象,字符串是对象,数组是对象,变量是对象,函数也是对象,所以才会允许['a','b','c'].push('d');这样的操作存在.类本身也是一个对象,也可以定义属性和方法: 复制代码 代码如下: function Test(){}; Test.str = 'str'; Test.fun = function(){return 'fun';}; var r1 = Test.str; // str var r2 = Test.fun(); // fun var

  • javascript中的prototype属性使用说明(函数功能扩展)

    这是一个比较特殊的属性,Javascript中的继承一般都依赖这属性实现. 在Javascript中,一切都是对象,字符串是对象,数组是对象,变量是对象,函数也是对象,所以才会允许['a','b','c'].push('d');这样的操作存在.类本身也是一个对象,也可以定义属性和方法: 复制代码 代码如下: function Test(){}; Test.str = 'str'; Test.fun = function(){return 'fun';}; var r1 = Test.str; /

  • js的Prototype属性解释及常用方法

    函数:原型 每一个构造函数都有一个属性叫做原型(prototype,下面都不再翻译,使用其原文).这个属性非常有用:为一个特定类声明通用的变量或者函数. prototype的定义 你不需要显式地声明一个prototype属性,因为在每一个构造函数中都有它的存在.你可以看看下面的例子: Example PT1 复制代码 代码如下: function Test(){}alert(Test.prototype); // 输出 "Object" 给prototype添加属性 就如你在上面所看到

  • 理解JavaScript的prototype属性

    其实,关于prototype只要几句话就可以总结: 任何原型都是对象,只有对象有原型 只有Function有prototype属性,它是这个Function作为构造器时生成对象所继承的原型.Function的原型和它的prototype属性无关 对象的原型可以通过非标准的属性 __proto__ 或ECMAScript5的方法 Object.getPrototypeOf() 访问. 1其实是错的,Object这个原型链尽头的对象它没有原型.可是为了更简单表述.在看原型链后你就会明白.toStri

  • 谈谈js中的prototype及prototype属性解释和常用方法

    prototype是javascript中笔记难理解的一部分内容,下面通过几个关键知识点给大家讲解js中的prototype.具体内容请看下文详情. 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展.我们称B的原型为A. 2 javascript的方法可以分为三类: a 类方法 b 对象方法 c 原型方法 例子: function People(name) { this.name=na

  • JavaScript中几个重要的属性(this、constructor、prototype)介绍

    this this表示当前对象,如果在全局作用范围内使用this,则指代当前页面对象window: 如果在函数中使用this,则this指代什么是根据运行时此函数在什么对象上被调用. 我们还可以使用apply和call两个全局方法来改变函数中this的具体指向. 先看一个在全局作用范围内使用this的例子: 复制代码 代码如下: <script type=> console.log( === window); console.log(window.alert === .alert); cons

  • 详解Javascript中prototype属性(推荐)

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不是基于'类的',而是通过构造函数(constructor)和原型链(prototype chains)实现的.但是在ES6中提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类.基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能

  • JavaScript prototype属性深入介绍

    每个函数创建时默认带有一个prototype属性,其中包含一个constructor属性,和一个指向Object对象的隐藏属性__proto__.constructor属性的值为该函数的对象.在一个函数前面加上new来调用,则会创建一个隐藏连接到该函数prototype成员的新对象(由__proto__属性来链接),同时函数的this将会被绑定到那个新对象上. 函数总是返回一个值:如果没有指定返回值,就返回undefined:如果当做构造函数来调用,且返回值不是对象,则返回this(该新对象):

  • JavaScript prototype属性详解

    每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性,也就是说将函数用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和方法. 私有变量.函数 在具体说prototype前说几个相关的东东,可以更好的理解prototype的设计意图.之前写的一篇JavaScript 命名空间博客提到过JavaScript的函数作用域,在函数内定义的变量和函数如果不对外提供接口,那么外部将无法访问到,也就是

  • JavaScript prototype属性使用说明

    这一点可能听起来会有点乱,别急,下面我便通过实例对这一特殊的方法作已下讲解: 首先,我们要先了解一下类的概念,JavaScript 本身是一种面向对象的语言,它所涉及的元素根据其属性的不同都依附于某一个特定的类.我们所常见的类包括:数组变量(Array).逻辑变量(Boolean).日期变量(Date).结构变量(Function).数值变量(Number).对象变量(Object).字符串变量(String) 等,而相关的类的方法,也是程序员经常用到的(在这里要区分一下类的注意和属性发方法),

  • javascript数组操作方法小结和3个属性详细介绍

    最近一直在用js,好好研究了下js数组的操作,在这里总结一下. 1.数组的创建 复制代码 代码如下: var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度 var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); //创建一个数组并赋值 要说明的是,虽然第二种方法创建数组指定了长度

  • JavaScript prototype 使用介绍

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

  • JavaScript类和继承 prototype属性

    我们已经在第一章中使用prototype属性模拟类和继承的实现. prototype属性本质上还是一个JavaScript对象. 并且每个函数都有一个默认的prototype属性. 如果这个函数被用在创建自定义对象的场景中,我们称这个函数为构造函数. 比如下面一个简单的场景: 复制代码 代码如下: // 构造函数 function Person(name) { this.name = name; } // 定义Person的原型,原型中的属性可以被自定义对象引用 Person.prototype

  • JavaScript prototype对象的属性说明

    一.什么是JavaScript中对象的prototype属性 JavaScript中对象的prototype属性,是用来返回对象类型原型的引用的.我们使用prototype属性提供对象的类的一组基本功能.并且对象的新实例会"继承"赋予该对象原型的操作.但是这个prototype到底是怎么实现和被管理的呢?对于对象的prototype属性的说明,JavaScript手册上如是说:所有 JavaScript内部对象都有只读的 prototype 属性.可以向其原型中动态添加功能(属性和方法

  • JavaScript中的原型prototype属性使用详解

    prototype属性可以将属性和方法添加到任何对象(Number, Boolean, String 和Date等). 注:原型(Prototype)是一个全局的属性,它可以使用在几乎所有的对象. 语法 object.prototype.name = value 实例: 这里有一个例子展示了如何使用原型(prototype)属性的属性添加到对象: <html> <head> <title>User-defined objects</title> <sc

随机推荐