`

javascript中静态方法、实例方法、内部方法和原型的一点见解

阅读更多

1、静态方法的定义

 

var BaseClass = function() {}; // var BaseClass=new Function();
BaseClass.f1 = function(){//定义静态方法
	 alert(' This is a static method ');
}
BaseClass.f1();//This is a static method
var instance1 = new BaseClass();
instance1.f1();//instance1.f1 is not a function

    由以上代码分析可知,静态方法不能被实例对象调用,再看以下代码

 

var BaseClass = new Function;
var Class2 = BaseClass;
BaseClass.f1 = function(){
alert("BaseClass ' s static method");
}
Class2.f2 = function(){
alert("Class2 ' s static method");
}
BaseClass.f1();//BaseClass ' s static method
BaseClass.f2();//Class2 ' s static method
Class2.f1();//BaseClass ' s static method
Class2.f2();//Class2 ' s static method

    从运行结果来看,BaseClass和Class都有f1和f2静态方法,实际上这两个函数是一样的,可以执行以下代码来验证

 

alert(BaseClass == Class2);//true

 

    如果删除其中一个函数中的静态方法,则对应的另一个函数的静态方法也被删除,比如执行

delete Class2.f2;

    同时也会删除BaseClass中的f2

 

2、实例方法的定义
    这里是利用javascript对象原型引用prototype来实现的,看以下代码

 

var BaseClass = function() {};
BaseClass.prototype.method1 = function(){
      alert(' This is a instance method ');
}
var instance1 = new BaseClass();
instance1.method1();//This is a instance method

    method1即为通过prototype原型引用定义的实例方法,这里也可以在实例上直接定义方法(变量),看以下代码

 

var BaseClass = function() {};
var instance1 = new BaseClass();
instance1.method1 = function(){
	alert(' This is a instance method too ');
} 
instance1.method1();//This is a instance method too

   下面介绍通过this指针来定义实例方法(变量),看以下代码

var BaseClass = function() {
 this.method1 = function(){
   alert(' Defined by the "this" instance method');
 }
};
var instance1 = new BaseClass();
instance1.method1();//Defined by the "this" instance method

    那么同时在实例上、原型引用上和“this”上定义了相同名字的实例方法后,实例会优先调用那一个呢?请看以下代码

var BaseClass = function() {
this.method1 = function(){
       alert(' Defined by the "this" in the instance method');
 }
};
var instance1 = new BaseClass();
instance1.method1 = function(){
	alert(' Defined directly in the instance method');
}
BaseClass.prototype.method1 = function(){
	alert(' Defined by the prototype instance method ');
}
instance1.method1();//Defined directly in the instance method

    通过运行结果跟踪测试可以看出直接定义在实例上的变量的优先级要高于定义在“this”上的,而定义在“this”上的又高于 prototype定义的变量。即直接定义在实例上的变量会覆盖定义在“this”上和prototype定义的变量,定义在“this”上的会覆盖prototype定义的变量。


3、内部方法
   先看以下定义

var BaseClass = function() {
	var method1 = function() {
		alert("Internal method");
	};
	var method2 = function() {
		alert("call Internal method");
		method1();
	};
	this.method3 = function(){
		method2();
	}
};
var instance1 = new BaseClass();
instance1.method1();// 会报错,因为method1是BaseClass中定义的内部变量,作用域只有在内部可见(闭包)
instance1.method3();//会先后调用method2和method1

   从运行结果来看,内部方法只能在内部使用,即用到了闭包的实现

分享到:
评论
1 楼 董宗磊 2012-10-26  
非常好。。。顶楼主

相关推荐

    浅谈Javascript的静态属性和原型属性

    文章给各位介绍Javascript的静态方法和原型方法一个例子,如果大家对于Javascript的静态方法和原型方法不了解可以和小编一起来看看。 一段代码,了解静态方法和实例方法: [removed] //对象构造函数 function ...

    JavaScript基础之静态方法和实例方法分析

    本文实例讲述了JavaScript静态方法和实例方法。分享给大家供大家参考,具体如下: 直接定义在构造函数上的方法和属性是静态的, 定义在构造函数的原型和实例上的方法和属性是非静态的 /* -- 静态方法 -- */ ...

    ES6 javascript中class静态方法、属性与实例属性用法示例

    本文实例讲述了ES6 javascript中class静态方法、属性与实例属性用法。分享给大家供大家参考,具体如下: 类相当于实例的原型, 所有在类中定义的方法, 都会被实例继承。 如果在一个方法前, 加上static关键字, 就...

    JavaScript中原型和原型链详解

    主要介绍了JavaScript中原型和原型链详解,本文讲解了私有变量和函数、静态变量和函数、实例变量和函数、原型和原型链的基本概念,需要的朋友可以参考下

    Javascript数组操作高级心得整理

    (1) JavaScript对象也是有属性和方法的 15  对象属性的使用 15  对象方法的使用 15 (2) 对象的定义与实例化 15 (3) 对象的作用域 16  JavaScript对象只有公用作用域 16  JavaScript对象没有静态作用域 16 ...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part1.rar

     4.3.4 跨浏览器的事件属性和方法   4.4 小结   第5章 动态修改样式和层叠样式表   5.1 W3CDOM2样式规范   5.1.1 CSSStyleSheet对象   5.1.2 CSSStyleRule对象   5.1.3 CSSStyleDeclaration对象...

    JavaScript设计模式之装饰者模式实例详解

    本文实例讲述了JavaScript设计模式之装饰者模式。分享给大家供大家参考,具体如下: 这里我们通过需求逐渐引出装饰者模式。 下面是一个关于几代汽车的不同逐渐体现装饰者模式的。 首先,我们先引入一个接口文件—-...

    JavaScript装饰者模式原理与用法实例详解

    本文实例讲述了JavaScript装饰者模式原理与用法。分享给大家供大家参考,具体如下: 这里我们通过需求逐渐引出装饰者模式。 下面是一个关于几代汽车的不同逐渐体现装饰者模式的。 首先,我们先引入一个接口文件—-...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part3.rar

     4.3.4 跨浏览器的事件属性和方法   4.4 小结   第5章 动态修改样式和层叠样式表   5.1 W3CDOM2样式规范   5.1.1 CSSStyleSheet对象   5.1.2 CSSStyleRule对象   5.1.3 CSSStyleDeclaration对象...

    [JavaScript.DOM高级程序设计](加)桑贝斯.扫描版.part2.rar

     4.3.4 跨浏览器的事件属性和方法   4.4 小结   第5章 动态修改样式和层叠样式表   5.1 W3CDOM2样式规范   5.1.1 CSSStyleSheet对象   5.1.2 CSSStyleRule对象   5.1.3 CSSStyleDeclaration对象...

    JavaScript中的面向对象介绍

    在其它面向对象语言中对象是由类的实例化而来,JavaScript是基于原型的面向对象语言,没有类的概念,对象派生自现有对象的副本对象创建对象构造函数公有、私有、特权、静态成员this、call和apply异常处理继承原型...

    JavaScript设计模式–简单工厂模式实例分析【XHR工厂案例】

    本文实例讲述了JavaScript设计模式–简单工厂模式。分享给大家供大家参考,具体如下: 第一步,Ajax操作接口(目的是起一个接口检测作用) (1)引入接口文件 //定义一个静态方法来实现接口与实现类的直接检验 //...

    JavaScript内核系列

    这种 策略显然颇具成效,以至于到现在很多初学者还会为JavaScript和Java的关系而感到困惑。 Javascript取得成功了之后,确实为页面注入了活力,微软也紧接着开发自己的浏览器脚本语言,一个是基于BASIC语言的 ...

    精通级 django

     ■ 创建静态、便捷的原型站点作为网站和应用的支撑平台。  ■ 使用Django Rest Framework构建REST API。  ■ 学习如何使用带有Backbone.js的MVC框架的Django。  ■ 在REST API平台上创建单页面网络应用。 ...

    Lightweight Django (English Version)

    ■ 创建静态、便捷的原型站点作为网站和应用的支撑平台。 ■ 使用Django Rest Framework构建REST API。 ■ 学习如何使用带有Backbone.js的MVC框架的Django。 ■ 在REST API平台上创建单页面网络应用。 ■ 将...

    轻量级django(书代码)

     ■ 创建静态、便捷的原型站点作为网站和应用的支撑平台。  ■ 使用Django Rest Framework构建REST API。  ■ 学习如何使用带有Backbone.js的MVC框架的Django。  ■ 在REST API平台上创建单页面网络应用。  ■ ...

    Polytype:JavaScript和TypeScript的动态多重继承。 没有mixins

    in isPrototypeOf 寻找基类将调用分派到多个基类动态基类更改TypeScript支持注意事项this在基本构造函数中for...in迭代中会员解析顺序受保护的实例实例成员不明确兼容性 特征Python样式多重继承在Node.js和大多数...

Global site tag (gtag.js) - Google Analytics