JavaScript理解(转载)

简介:
对象,函数,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操作...都变的十分简单.


本文转自温景良博客园博客,原文链接:http://www.cnblogs.com/wenjl520/archive/2008/10/23/1318083.html,如需转载请自行联系原作者

相关文章
|
前端开发 JavaScript
深入理解JavaScript系列(转载)
深入理解JavaScript系列 深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 深入理解JavaScript系列(2):揭秘命名函数表达式 深入理解JavaScript系列(3):全面解析Module模式 深入理解JavaScript系列(4):立即调...
839 1
|
3月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
34 0
|
3月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
50 1
JavaScript中的原型 保姆级文章一文搞懂
|
6月前
|
JavaScript 前端开发
JS:一篇文章带你搞懂什么是异步
JS:一篇文章带你搞懂什么是异步
|
7月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
196 4
|
7月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
108 3
|
7月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
89 3
|
7月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
138 2
|
7月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
107 4
|
7月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物医院系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物医院系统附带文章源码部署视频讲解等
81 2

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    49
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    57