月度归档:2015年02月

javascript语言之 this概念

由于javascript是一种解释性语言,运行时才会解释所有的变量值,所以对于javascript中this所指的对象是动态变化的,由于函数调用方式不同它可以指向全局对象,局部对象或者任意对象。

this对象生成:当javascript开始加载时 ,this对象指window,当申明一个对象时 例 var t={} 此时t对象里面的方式 调用this时指向 t。

一:
当在全局范围内使用 this,那么这个this对象就是指向window。
二:
在一个函数里面使用this,那么this就是一个局部对象,则this为此函数对象
< script>
var t = {
x:0,
y:0,
fun1: function(x,y) {
this.x = this.x + x;
this.y = this.y + y;
alert(“x 数值:”+x);
alert(“y 数值:”+y);
}
};
t.fun1(2,3)//this 绑定到当前对象,即 t 对象
< /script>
三:
函数里面调用this对象,则被绑定为全部对象,x变量被加载为 全部变量(慎用)。
< script>
function xToQuanJu(x) {
this.x = x;
}
xToQuanJu(5);
alert(x);
< /script>
四:
作为构造函数调用
JavaScript 支持面向对象式编程,与主流的面向对象式编程语言不同,JavaScript 并没有类(class)的概念,而是使用基于原型(prototype)的继承方式。相应的,JavaScript 中的构造函数也很特殊,如果不使用 new 调用,则和普通函数一样。作为又一项约定俗成的准则,构造函数以大写字母开头,提醒调用者使用正确的方式调用。如果调用正确,this 绑定到新创建的对象上。
在 JavaScript 中函数也是对象,对象则有方法,apply 和 call 就是函数对象的方法。这两个方法异常强大,他们允许切换函数执行的上下文环境(context),即 this 绑定的对象。
function fun1(x, y){
this.x = x;
this.y = y;
this.fun2= function(x, y){
this.x = x;
this.y = y;
}
}

var f1= new fun1(0, 0);
var f2= {x: 0, y: 0};
f1.fun2(1, 1);
f1.fun2.apply(f2, [10, 10]);
在上面的例子中,我们使用构造函数生成了一个对象 f1,该对象同时具有 fun2 方法;创建了另一个对象 p2 数据集合变量,我们看到使用 apply 可以将 f1 的方法应用到f2 上,这时候 this 也被绑定到对象f2 上。另一个方法 call 也具备同样功能,不同的是最后的参数不是作为一个数组统一传入,而是分开传入的。

javascript 重要属性之prototype(继承)

在javascript中每一个函数都拥有 prototype属性,
在javascript中使用prototype,可以向已经生成的对象中添加方法和属性。
例: 为一个对象 动态添加属性
< script type="text/javascript">
function blog(blogName,blogQty)
{
this.name=blogName;
this.qty=blogQty;
}

var b=new blog(“maomao365.com”,”1″);
blog.prototype.all=null;
b.all=888;

blog.prototype.alert=function(){
alert(“动态添加函数!”);
}
b.alert();
document.write(b.all);
< /script>
————–类似于————-
< script type="text/javascript">
function blog(blogName,blogQty)
{
this.name=blogName;
this.qty=blogQty;
}

blog.prototype={
all:’888′,
alert:function(){
alert(“动态添加函数!”);
}
};

var b=new blog(“maomao365.com”,”1″);
b.alert();
document.write(b.all);

< /script>

如何实现javascript js 类命名空间的写法

在C#中有namespace概念,java中有package的概念,有了这些概念之后,在系统的运行时,每一个方法就会拥有唯一的访问路径
namsepace.class.object,这样就可以避免由于object重名所导致的问题.
由于javascript是一种解释型语言,在javascript中,如果定义两个同名函数或者变量,系统会用最后一个函数或变量来替换前一个函数和变量,
如果是一个的单人开发的系统,则不会产生很多异常,因为可以人为的控制这些命名的唯一,如果是大型多人协同开发系统,则可能产生很多异常,增加程序的调试难度。

举例说明命名空间必要性

例如我们编写一个页面 引入jquery框架,然后我们在页面里面自定义一个$函数,那么$ 函数可能会失效,或者产生莫名其妙的现象

命名空间使用

< input type="button" value="命名空间使用" onclick="(new namespace()).$();"/>

< script type="text/javascript">
function namespace(){
this.$=function(){
alert(‘命名空间使用!’);
}
}
< /script>

这种写法,其实就是在namespace下定义了一个$

简化每次都 new namespace
< input type="button" value="命名空间使用" onclick="t.$();"/>

< script type="text/javascript">
(function namespace(){
this.$=function(){
alert(‘命名空间使用!’);
}
window.t ={};
window.t=this;
})();
< /script>

进阶篇

在一个命名空间里面可以像 C# java一样包含很多变量和方法

< input type="button" value="命名空间使用" onclick="t.$();"/>
< input type="button" value="命名空间简化调用" onclick="method3();"/>
< input type="button" value="命名空间method2使用" onclick="t.method2();"/>
< input type="button" value="命名空间method3使用" onclick="t.method3();"/>
< input type="button" value="命名空间a变量赋值使用" onclick="t.a=999;"/>

< script type="text/javascript">
(function namespace(){
this.$=function(){
alert(‘命名空间使用!’);
}
this.method2=function(){
alert(“this method 2!”);
}
this.a=”888″;
this.method3=function(){
alert(“命名空间内部变量:a”+a);
}

window.t ={};
window.t=this;
window.t.method3=method3;
})();
< /script>