Kevin-moon

学习在于分享
posts - 28, comments - 387, trackbacks - 3, articles - 3
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理

JavaScript,一切都是这么简单

Posted on 2008-10-23 12:54 Kevin-moon 阅读(2870) 评论(25)  编辑 收藏 网摘 所属分类: 网站设计

     对象,函数,Object,Constructor,Prototype,Scope,this.....,这些东西曾经让我无比的烦恼,也让我对JS产生了畏惧!我现在准备来解决这些了,那么让我们从简单开始吧. 
     首先必须建立对象的概念,"Javascript是基于对象的语言,它里面的所有数据都是对象.".


了解JS的数据类型:
基本数据类型:undefined,number,string,boolead,function,object.我们可以通过typeof()来知道是哪种类型的.
内置数据类型:Function,Object,Number,String,Object......
自定义数据类型:以function a(){};这样定义的数据.即称为函数.

我们先了解下数据类型中不同类型之间的关系,在掌握了这个后,对于其他的理解将变的很简单,看下图:


     
这图可能看着有点迷惑人.其中最迷惑的应该就是Function和Object之间的关系了.那么结合图,就简单解释下:
     Object类型是所有类型的基类,所有类型都是继承它的,即如果对Object类型进行扩展,对其他的所有类型都会有影响的.例如:

Code

接下来就是Function类型了,它是继承Object.但是这里Object和Function又都属于functon对象(函数),function对象又是通过Function类型构造出来的,这是怎么回事!?
     其实我们可以这样理解,所有的内置数据类型和自定义类型都是函数对象(function对象)[这里我们可以通过typeof()来判断对象的类型],则所有function对象都可以访问Function和Object的[prototype],Function和Object之间又是继承关系,所以如果当Function和Object的[prototype]上都有相同名称的属性的时候,JS会根据"就近原则",先去得到Function上的[prototype]的属性.

Code

     function对象(函数)都是通过JS引擎在内部构造的,JS留给我们构造对象的就只有new了,例如var obj = new Object();通过new构造的对象的类型都是object类型.所有的function对象都具有[prototype],[constructor],[scope]这些属性,这三个属性后面会有讲述.

object对象创建的解析 
     javascript通过new的方式构建出来的对象都是object类型的.并且new的方式主要是利用了function对象的[constructor]这个属性,这个属性是每个function对象(函数)都具有的属性,例如:

Code
其中的创建过程如下:
a,创建对象obj并进行初始化
b,设置对象obj的[prototype]属性(后面会详细阐述)
c,设置对象obj的[constructor]属性
d,通过this来添加当前对象obj的属性,例如this.a = "a";那么a就是obj的属性了.

对象的原型链[prototype]
     大家可以再次看下上面的图,那其实就是function对象(函数)的原型链了.这里主要讲object对象的原型链.
     首先看下obj instanceof Object函数,这个函数是用来判断对象obj是否是Object的实例.
Code

这个instanceof和对象的原型链有什么呢!其实它们之间有一个这样的关系,当instanceof返回为true的时候,就表示这个对象是通过那个类型实例化来的,可以访问那个类型的原型链.所有的关系如下图:
 
     说了那么多,最后总结下,其实就是对象(object类型或function类型)可以访问的原型链就是构造它们的类的[prototype]和Object的[prototype].

执行环境[scope]
     语言的执行都需要有环境的,javascript也是这样,首先是一个大的环境,所有的JS代码都执行在大的环境中,即这个大的环境就是全局环境.其中每个函数/方法执行的时候,都要为它的执行去创造一个内部环境,那么这种外部环境,内部环境,全局环境...它们之间的关系都构成了环境链.
     函数/方法只能访问在环境中的数据.这种环境链的构成是:当在全局环境中,执行函数的时候,JS把全局环境传入函数中,和函数构成新的执行环境,所以函数可以访问到全局环境中值.如果在函数中有内部函数,那在函数中执行内部函数的时候,JS就会把全局环境+函数环境传人内部函数构成新的执行环境,依次下去,就像链条一样.

Code

     我觉得如果这些理解的话,那么你对javascript就有了质的提升.其他的window,表单操作,html操作,css操作...都变的十分简单.

     呵呵,写完了,这些就是目前我对JavaScript的认识.如果对你有益,是最好的.有讲解不对的地方,大家一起讨论......

0
0
(请您对文章做出评价)
« 上一篇:博客园在IE8运行下的BUG
» 下一篇:成功和少妇上床攻略(哈佛评论)

Feedback

#1楼   回复  引用  查看    

2008-10-23 13:04 by Justin      
好!以后就来你这学javascript了

#2楼   回复  引用    

2008-10-23 13:06 by EricPan[未注册用户]
文章内容不错,排版也很舒服。学习学习!

#3楼   回复  引用  查看    

2008-10-23 13:09 by 栖山      
@Justin
很好,先收藏,再学习

#4楼   回复  引用    

2008-10-23 13:17 by 写的不错[未注册用户]
function cfff(){
var f = d; //可以访问到cff_1中的d变量
var q = c; //不可以访问到cfff_0中的c变量
}

“cfff_0中”多写了一个f

#5楼   回复  引用  查看    

2008-10-23 13:29 by love&tiger      
这些都明白,但用js写点东西还是不行,郁闷

#6楼[楼主]   回复  引用  查看    

2008-10-23 13:31 by Kevin-moon      
@love&tiger
这些都明白 怎么会用JS写东西不行呢!呵呵
我是很早就用JS写东西 但是一直都没真正弄懂 直到弄清上面的概念后,才JS有种豁然的感觉

#7楼[楼主]   回复  引用  查看    

2008-10-23 13:44 by Kevin-moon      
@写的不错
好象是多了一个 呵呵 真仔细 谢谢!

#8楼   回复  引用    

2008-10-23 13:54 by heero0w[未注册用户]
Object也是Function的实例,原因是

Object.constructor == Function
Object instanceof Function

给Function添加
Function.prototype.test = function() { alert("test"); }
调用
Object.test();
Number.test();

都可以进行调用

#9楼   回复  引用  查看    

2008-10-23 14:24 by Janja      
我觉得如果这些理解的话,就掌握了javascript的核心
------------------只能说这门语言刚入门了
.其他的window,表单操作,html操作,css操作...都变的十分简单.
--------------------
要写点东西,不是懂语言就OK的,还有很多要学

#10楼   回复  引用  查看    

2008-10-23 14:31 by cloudgamer      
不错不错
不过知道这些还不够还要在不断的尝试中体会才行
理解这些就说掌握了“核心”有点小看js了

#11楼[楼主]   回复  引用  查看    

2008-10-23 14:37 by Kevin-moon      
@Janja
这是基础 理解了这些 其他都是运用而已
当然要完全的熟悉并且灵活的运用,当然还有很多

#12楼[楼主]   回复  引用  查看    

2008-10-23 15:10 by Kevin-moon      
@痴情客
我不清楚到底要什么样的文章才能放在首页,真晕啊!
是这些太简单了吗!还是我写错了!... 无非是分享下自己的理解嘛!
哎~~~,不知道说什么了.
这里本来就是分享,学习,讨论的地方!

#13楼   回复  引用    

2008-10-23 15:19 by 小菜000[未注册用户]
@Kevin-moon
楼主,我支持你! 赞一个.....

#14楼[楼主]   回复  引用  查看    

2008-10-23 15:26 by Kevin-moon      
@痴情客
一句话就...... 哭了.....
这其实主要是我一直在用JS,以前也看过JQUERY,ASP.NET AJAX这些的JS框架,但是一直有点不太清晰的地方,但是当我完全理解prototype,scope...这些的时候,所有的东西对我都豁然开朗.
“我觉得如果这些理解的话,就掌握了javascript的核心”,
纠正下吧
"对于这些的理解,是理解Javascript的必要条件",呵呵,这样就别愤慨了

#15楼   回复  引用    

2008-10-23 15:45 by EricPan[未注册用户]
@痴情客
愤青一个,你强就写出一篇好过楼主的文章出来看看。大家来是分享,学习的。为什么这样的文章不能放在首页?

#16楼   回复  引用  查看    

2008-10-23 15:49 by cloudgamer      
写出这样的已经不错啦

#17楼[楼主]   回复  引用  查看    

2008-10-23 15:50 by Kevin-moon      
@痴情客
如果你是牛人 你就说下 我理解错误的地方 和你的见解 我很欢迎,一起学习嘛!
别老说这些话 你想体现什么呢?!...... 你完全理解了 你很强嘛!晕,这些本来就不是复杂的东西........

#18楼   回复  引用    

2008-10-23 16:23 by winter-cn未登录[未注册用户]
我觉得挺好的啊

怎么没看到痴情客的回复? 删了?

#19楼   回复  引用  查看    

2008-10-23 20:20 by 蛙蛙池塘      
JavaScript高级测试题目,虽然有些刁钻,但是非常能考验JavaScript熟悉程度


说出它们的值:

1、typeof(NaN) 、typeof(Infinity)、typeof(null)、typeof(undefined)
2、NaN == NaN
3、NaN != NaN
4、NaN >= NaN
5、null == undefined
6、null >= undefined
7、null <= undefined
8、parseInt("123abc")
9、"123abc" - 0
10、Infinity > 10
11、Infinity > "abc"
12、Infinity == NaN
13、true == 1
14、new String("abc") == "abc"
15、new String("abc") === "abc"



说出它们的输出结果:

1、
var a = "123abc";
alert(typeof(a++));
alert(a);

2、
var a = "123abc";
a.valueOf = function(){return parseInt(a);}
alert(++a);
alert(a-0);

3、
var a = new Object();
a.toString = function(){return "123abc";}
a.valueOf = function(){return parseInt(a);}
alert(++a);
alert(a-0);

4、
String.prototype.valueOf = function()
{
return parseFloat(this);
}
alert("123abc" > 122);
alert(new String("123abc") > 122);

5、
var s = new String("abc");
alert(typeof(s) == typeof("abc"));
alert(s === "abc");
alert(s.toString() == s);

6、
var a = new Object();
a.toString = function(){return "a"};
var b = new Object();
b.toString = function(){return "b"};
alert(a>b);
a.valueOf = function(){return 1};
b.valueOf = function(){return 0};
alert(a>b);

7、
function step(a)
{
return function(x)
{
return x + a++;
}
}
var a = step(10);
var b = step(20);
alert(a(10));
alert(b(10));

#20楼   回复  引用  查看    

2008-10-23 22:08 by 蛙蛙池塘      
只要把自己的心得经验写出来,总结出来和大家分享就是好的,博客园读者多了,众口难调呀,你再发多高深的东西,也有人觉得简单,可不呗,好多书上,网上都有,重要的是分享精神。

#21楼   回复  引用    

2008-10-23 22:16 by 大[未注册用户]
写得相当不错!

#22楼[楼主]   回复  引用  查看    

2008-10-24 09:33 by Kevin-moon      
@蛙蛙池塘
1、typeof(NaN)=number 、typeof(Infinity)=number、typeof(null)=object、typeof(undefined) = undefined
2、NaN == NaN //false
3、NaN != NaN //true
4、NaN >= NaN //false
5、null == undefined //true
6、null >= undefined //false
7、null <= undefined //false
8、parseInt("123abc") //123
9、"123abc" - 0 //NaN
10、Infinity > 10 //true
11、Infinity > "abc" //false
12、Infinity == NaN //false
13、true == 1 //true
14、new String("abc") == "abc" //true
15、new String("abc") === "abc" //false

1、
var a = "123abc";
alert(typeof(a++)); //number
alert(a); //123abc

2、
var a = "123abc";
a.valueOf = function(){return parseInt(a);}
alert(++a); //NaN
alert(a-0); //NaN

3、
var a = new Object();
a.toString = function(){return "123abc";}
a.valueOf = function(){return parseInt(a);}
alert(++a); //124
alert(a-0); //124

4、
String.prototype.valueOf = function()
{
return parseFloat(this);
}
alert("123abc" > 122); //false
alert(new String("123abc") > 122); //true

5、
var s = new String("abc");
alert(typeof(s) == typeof("abc")); //false
alert(s === "abc");
alert(s.toString() == s); //false

6、
var a = new Object();
a.toString = function(){return "a"};
var b = new Object();
b.toString = function(){return "b"};
alert(a>b); //false
a.valueOf = function(){return 1};
b.valueOf = function(){return 0};
alert(a>b); //true

一早起来就看到这么有意思的题目,呵呵!

#23楼   回复  引用    

2008-10-24 09:35 by winter-cn未登录[未注册用户]
@蛙蛙池塘
JavaScript高级测试题目--->月影的

#24楼   回复  引用  查看    

2008-10-24 11:14 by 红魔      
很不错!

#25楼   回复  引用  查看    

2008-10-24 11:23 by 万一      
写得不错.