`
blueion
  • 浏览: 40492 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

JavaScript核心基础(上)

阅读更多

JavaScript是一种动态的、基于对象的浏览器端脚本语言,具有JAVA、C++静态语言所没有的灵活程度。JavaScript的写法变化多端,且各种写法带来的执行性能也会有所不同,所以在此进行总结。


核心功能#

JavaScript早期分为服务端和浏览器端两种脚本,服务器端已基本被jsp和asp两大阵营淘汰。现在JavaScript遵循ECMA-262标准(也称为ECMAScript3),ECMAScript4正在激烈讨论中。

组件#

JavaScript认可两类对象:原生(Native)对象和宿主(Host)对象,其中宿主对象包含一个被称为内置对象的原生对象的子类。原生对象属于语言,而宿主对象由环境提供,比如说可能是文档对象、DOM 等类似的对象。

具体来看,Javascript主要由二块构成:Core(核心部分)+DOM实现部分。(DOM是w3c定义的针对HTML、XML文档编程的一系列接口。通过这些接口,我们可以改变文档结点的结构、样式、内容。实现这些接口的语言可以是java、Python,javascript等。)

 

Core Dom
定义了语法规则,及内置的全局对象(Date、Function等),全局方法(parseFloat),全局属性(NaN,undefined等)
针对HTML文档与XML文档操作的API

语言的特点#

面向对象语言包括几个主要特性:抽象,继承,封装和多态。Javascript本质上不是面向对象的,而是基于对象的。基于对象的语言对上面四个特性支持很弱。

JavaScript只有类,没有接口和抽象类;继承则通过prototype实现,Function的apply或call方法间接实现;封装访问特性仅有private和public两个级别;不支持多态的特性。但是,JavaScript通过闭包和函数式编程以及弱类型来克服这些缺点,使得其具有很大的灵活性。

变量和词法作用域#

JavaScript的变量分为全局变量(global variable)和局部变量(local variable)。局部变量的声明需要var,如果存在同名的全局变量而不用var,则解释器不会认为在声明局部变量。另外,一旦声明了局部变量以后,它将在整个作用域都有定义(无论位置在作用域的哪里),在此作用域内不会调用同名的全局变量。

每段JavaScript的代码都运行在与之对应的执行环境中,作用域(scope)是组成执行环境的一部分,它表示了某段代码所在的上下文环境(对象列表或对象链),通常它是以链表的形式存在,也称为作用域链。在JavaScript解释器启动的时候,它会创建一个全局对象(global object不属于任何函数的顶层),全局变量就是这个全局对象的一个属性,所有的预定义函数和属性也都是这个全局对象的属性。接着解释器会创建一个执行环境,这个执行环境包含了作用域链的定义;在这个环境下,解释器会为唤醒的function创建call object(也称为active object),并将它放置在作用域链的前面。call object持有该function的Arguments object的引用以及在此function里定义的Argument和局部变量的引用。

对于非嵌套的function来说,它的作用域链通常就是call object--global object,解释器会沿着作用域链查找变量的定义。

参考scope in javascript

闭包#

许多动态语言特别强调闭包的重要性。简言之,闭包就是函数的作用域,一个函数的主体(可执行的代码段)和它的定义作用域的组合称为闭包。闭包产生的原因是JavaScript允许创建内部函数,当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包。也就是说,内部函数会在外部函数返回后被执行。而当这个内部函数执行时,它仍然必需访问其外部函数的局部变量、参数以及其他内部函数。这些局部变量、参数和函数声明(最初时)的值是外部函数返回时的值,但也会受到内部函数的影响。

闭包有两个特点:

1、作为一个函数变量的一个引用,当函数返回时,其处于激活状态。

2、一个闭包就是当一个函数返回时,一个没有释放资源的栈区。

这两个特点也就是一个意思:如果存在闭包,JavaScript解释器的GC不会销毁已返回的外部函数占用的堆栈(因为内部函数持有了外部函数中变量的引用)。这样便可以继续使用内部函数,即使内部函数持有外部函数中变量的引用。

浏览器的内存泄露#

内存泄露的根本原因是因为浏览器的GC机制不够完善,当JavaScript和DOM对象互相引用的时候,内存泄露就会发生。GC是由对象引用计数器来控制的,当解释器发现对象的引用计数为零的时候,GC就发生了。但是,当发生DOM和JavaScript循环引用的时候,他们的引用计数都不为零,所以GC也就无法进行。一个解决内存泄露的方法就是在循环对象不再使用的时候,将null赋给它,这样它们的引用都会为零。

另外,使用闭包也要注意,因为内部函数持有外部函数的引用,所以如果DOM对象引用了内部函数,而外部函数恰巧也引用这个DOM对象,内存泄露也会发生。参考内存泄露的类型会有更多信息。

prototype#

每个JavaScript对象都有一个prototype(原型)属性,该属性引用另外一个对象,且可以编程赋予。每个原型对象有个constructor属性反过来引用函数本身。



 

 

原型属性也是一个对象,因此其本身也有prototype属性引用另一个对象,这样就可能形成一个原型链。这个原型链会终止于链中原型为 null 的对象,而Object 构造函数的默认原型正好有一个 null 原型。

更为重要的是,JavaScript解释器会自动顺着原型链查找属性。下图说明了在Dog中查找toString(),实际该方法在Object.prototype中。

 



 

 

eval(String)#

将字符串作为javascript脚本执行

setTimeout#

setTimeout用来推迟一个函数的执行,其特殊之处在于将所推迟的函数脱离现有的调用栈(call stack),例如:

function a() {  //入第一个栈(编号1)
setTimeout
(function(){alert(1)},0);    //如第二个栈(即一个新栈)(编号1)
alert
(2);    //入第一个栈(编号2)
}
a
();    //执行结果为 2 1

 

这样的setTimeout用法在实际项目中还是会时常遇到。比如浏览器会聪明的等到一个函数堆栈结束后才改变DOM,如果再这个函数堆栈中把页面背景先从白色设为红色,再设回白色,那么浏览器会认为DOM没有发生任何改变而忽略这两句话,因此我们可以通过setTimeout把“设回白色”函数加入下一个堆栈,那么就可以确保背景颜色发生过改变了。

类似的,浏览器还有个onkeyup事件也可以实现我们的需求

对Javascript调用堆栈和setTimeout用法的深入研究


基本语法的一些问题#

匿名函数与直接函数量#

本质上,匿名函数和直接函数量是同样的事物,匿名函数是无法被外部调用的。使用匿名函数的优势是可以直接进行值调用(函数式编程的特点),只将匿名函数作为中间过程而不用担心会与其他外部变量冲突。

1、在

  var f=function(x) {return x*x;};f();

去掉了f后,再在函数体上加上括号(优先级的缘故),得到匿名函数第一种方式
  (function(x){})();

2、

(function(x){return x*x;}(x)); //Eg. x=10,返回100

最后的括号中的x作为匿名函数的参数

几种对象声明的代码#

var MyObject = {};   //one

function MyObject(pram)  //two
{
...
}

var MyObject = function(pram) //three
{ blablabla };

声明成员函数/属性#

var MyObject = {
     
FirstName:"Mary",  //使用冒号
     
LastName = "Cook", //使用=号

     
"Age":18,                       //使用字符串声明
     
"ShowFullName" : function(){
      alert
(this.FirstName + ' ' + this.LastName);
       
}
 
}

MyObject.ShowFullName();    //直接访问成员函数,无需构造

用字符串做变量名可以使程序更灵活

var MyObject = new Function("msg", "msg1","alert(msg+msg1);");
// Function可以有多个入口参数,最后一个参数作为方法体。

var o = new MyObject('Hello world!',' I am here!');
//显示"Hello world! I am here!"

可以利用.和[]]来引用成员

var DateTime = { Now : new Date(), "Show" : function() { alert(new Date());} };

alert
(DateTime.Now);
// 等价于:
alert
(DateTime["Now"]);

DateTime.Show()
// 等价于:
DateTime["Show"]();

call#

call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

member1 = 'test';
function abc()
{
    alert
(this.member1);
}
var obj = { member1:"Hello world", show:abc};
var obj2 = { member1:"Hello world again", show:abc};

obj
.show();
//也可以使用
abc
.call(obj);
abc
.call(obj2);

abc
(); // 此时abc中的this指向了当前上下文

 

apply#

apply是与call类似的用于切换上下文的语句,与call不同的是apply能把参数包裹进一个数组再传递给呼叫函数。

 

命名空间#

var System = {};   //声明命名空间

//命名空间的一个级别可能不是唯一的,因此可以创建嵌套的命名空间:
System.lang = {};
System.lang.out = function(...){...}
System.lang.out.writer = function(...){...}

//还可以指定别名来定义命名空间
var Eg = System.lang.out;
writer
= Eg.writer()
;
if(typeof System == 'undefined') var System = {}; //判断代码来防止重复声明

  • 大小: 3.3 KB
  • 大小: 19.2 KB
分享到:
评论

相关推荐

    JavaScript核心技术 PDF扫描版

    《JavaScript核心技术》是一本真正意义上的“新书”,不仅介绍了最新的JavaScript知识和方向,还完全覆盖了当今Web开发中关于JavaScript的所有重要话题,它使用了大量实例代码,图文并茂地讲解了使用JavaScript的...

    javascript核心参考手册

    总的来说,《JavaScript核心参考手册》是一部全面的指南,它不仅覆盖了语言基础,也包含了许多高级话题,对于希望深入理解和精通JavaScript的开发者来说,无疑是一份宝贵的参考资料。通过阅读并实践书中的内容,你将...

    JavaScript核心概念及实践

    资源名称:JavaScript核心概念及实践内容简介:《Javascript核心概念及实践》不仅帮助读者迅速掌握Javascript基础知识和核心技术,而且通过实例讲解如何将这些知识和技术理解应用到实际工作中,提升编程...

    javascript核心

    这个"JavaScript核心"系列深入探讨了语言的各个方面,旨在帮助读者全面理解其内核。 1. **前言及概述**:作者通过自己的学习历程引出了JavaScript的重要性和发展历程。随着Ajax的普及,JavaScript不再仅仅是创建...

    JavaScript核心技术.pdf 高清下载

    除了以上基础核心概念外,《JavaScript核心技术.pdf》还可能涵盖了以下进阶主题: #### 8. 类与面向对象编程 - **类**:ES6引入的新特性,用于定义对象的蓝图。 - **继承**:子类可以从父类继承属性和方法。 - **...

    JavaScript核心参考手册

    如果你是对javascript没有任何基础的小菜,就不要下载它了,因为它并非JavaScript教程,下载了你可能不懂用。 如果你是javascript的老菜,对javascript内置对象与函数非常熟悉,你也不要下载它,下了你也不必查它。

    JavaScript 核心教程 从菜鸟到老鸟

    总之,通过这个"JavaScript核心教程,从菜鸟到老鸟"的学习,你将系统地掌握JavaScript的基础知识,并逐步进阶,最终在前端开发领域游刃有余。无论是jQuery的高效DOM操作,还是JavaScript的高级特性,都将为你的编程...

    JavaScript中文手册+核心手册

    这个压缩包包含三部分资源:JavaScript语言中文参考手册、JavaScript核心参考手册以及微软JavaScript手册,这些都是深入理解和学习JavaScript的重要资料。 1. **JavaScript语言中文参考手册**: 这部分手册详细...

    HTML5+JavaScript动画基础(文本+源码)

    Canvas API提供了丰富的绘图函数,如fillRect()用于填充矩形,arc()用于绘制圆形或弧形,以及drawImage()用于在画布上显示图像,这些都是制作动画的基础。 JavaScript作为主要的脚本语言,负责控制动画的时间序列和...

    JavaScript核心基础到进阶之路1

    本文将深入探讨JavaScript的核心基础知识以及进阶概念,包括DOM、BOM和事件处理。 DOM(Document Object Model)是W3C标准的一种,它将HTML或XML文档表示为一棵可编程的对象树。在JavaScript中,DOM允许我们通过...

    javascript第5版核心指南

    本核心指南将深入讲解JavaScript的基础概念,同时涵盖了一些在软件公司笔试中常见的题目类型。 首先,让我们从基础开始。JavaScript是一种解释型的、弱类型的、基于原型的脚本语言。这意味着它不需要预编译,可以在...

    JavaScript基础教程(pdf版)

    本教程旨在为初学者提供一个全面的JavaScript基础知识学习平台,帮助理解并掌握这种强大的脚本语言。 《JavaScript基础教程》首先会介绍JavaScript的历史背景和基本语法,包括变量、数据类型、操作符、流程控制...

    JavaScript核心技术PDF

    - JavaScript核心技术包括基本语法、数据类型、控制结构、函数、对象和面向对象编程、事件处理、DOM操作等基础内容。 2. PDF电子书: - PDF(便携文档格式)是一种电子文件格式,用于跨平台显示和打印文档,保持...

    JavaScript核心技术开发解密 随书源代码

    本书“JavaScript核心技术开发解密”由阳波撰写,旨在深入剖析JavaScript的核心技术,帮助读者掌握这门语言的精髓。书中包含232页的内容,覆盖了JavaScript的各个方面,为开发者提供了宝贵的资源和实践指导。 ...

    javascript核心基础

    本教程“JavaScript核心基础”深入探讨了JavaScript的一些关键概念和技术,包括对象编程、闭包、封装和继承,以及类的不同实现方式。 一、JavaScript对象编程 在JavaScript中,对象是一种数据结构,它将数据和操作...

    零基础学会javascript

    "零基础学会JavaScript"的学习之旅将带你逐步掌握这门语言的基础到高级技巧。 首先,JavaScript的核心概念是变量、数据类型和操作符。变量用于存储数据,可以随时改变其值。数据类型包括基本类型(如字符串、数字、...

    JavaScript基础知识例子

    总的来说,这个压缩包提供了一个全面的JavaScript基础知识教程,涵盖了数据类型、Object、内置对象和变量等核心概念,对于初学者或者需要巩固基础的开发者来说,是一份非常有价值的参考资料。通过学习这些内容,可以...

Global site tag (gtag.js) - Google Analytics