码迷,mamicode.com
首页 > 编程语言 > 详细

javascript 知识点梳理 -- 整理自广州传智王老师

时间:2015-04-05 09:11:40      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:javascript   面向对象   继承   object   json   

Javascript

Javascript中的数据类型

JavaScript中一共有六种数据类型:

1String   :字符串类型,在JavaScript中可以通过双引或单引括起来

2Number  :数值类型,在JavaScript是没有整形与浮点型之说的,所有的数值类型都属于Number类型,10  10.88  5.66

3Boolean  :布尔类型,其值可以是truefalse

4Undefined :变量有声明,但未赋值

5Null      :空类型

6Object    :对象类型,Array数组也是属于Object类型

 

for…in循环(主要用于遍历对象、数组)

自调用匿名函数

基本语法:

 

 

arguments参数

arguments是函数的参数列表,其功能类似数组,但其并不是一个真正的数组(类数组)

使用arguments属性在定义函数的时候无须指明函数的参数列表,在函数调用时可以任意填充

实现一个函数的多种功能

 

示例代码:

 

 

作用域链

 

说明:

当程序运行到第9行时,首先在全局作用域中声明一个变量i=100,然后代码向下执行,

执行到第10-19行时,会声明fn1函数,但是其内部函数体并没有被执行,

当运行到第21行时,系统会调用fn1函数,函数主程序回到第11行开始执行函数体,

当执行到第18行时,系统会执行fn2内部的程序,执行到第12行时,由于遇到了一个变量i,那么系统首先会在当前作用域中寻找var声明语句,由于没有找到,其会到上一级fn1函数中继续寻找,由于也没有找到,其会到上一级全局作用域去寻找,如找到则直接替换,否则会在全局作用域自动声明该变量,我们把这个过程就称之为作用域链

 

作用域链原理图:

 

 

Javascript事件编程

需要注意的几个事件:

onload  :    载入页面时触发

onblur  :   失去焦点触发

onfocus : 获得焦点时触发

onchange :   事件改变时

onselect:  事件选择的受触发

onkeydown:  键盘按下时触发

onkeyup: 键盘松开时触发

onsubmit :   提交时触发

 

 

事件绑定:

行内绑定 <元素 属性列表 事件=”事件的处理程序“ />

动态绑定     

事件绑定

事件监听

事件监听的定义和使用

1IE模型浏览器(IE或者基于IE内核的浏览器)

基本语法:

attachEvent(type,callback);

作用:为对象绑定事件监听

参数说明:

type:事件类型(onclick,onfocus

callback:事件的处理程序

调用语法:

dom对象.attachEvent(type,callback);

 

2)W3C模型浏览器(火狐、谷歌)

addEventListener(type,callback,capture);

作用:为对象绑定事件监听

参数说明:

type:事件类型,不带’on‘前缀(click,focus,blue

callback:事件的处理程序

capture:使用的事件模型,Boolean类型,true:捕获模型  false:冒泡模型(默认)

IE模型浏览器只支持冒泡模型

调用语法:

dom对象.addEventListener(type,callback,capture);

 

解决事件监听的兼容性问题:

<script type="text/javascript">

    function addEvent(obj , event , callback){

        //如果是w3c浏览器

        if(obj.addEventLisenter){

            obj.addEventLisenter(event , callback);

        }else{

            event.attachEvent(‘on‘+event , callback);

        }

    }

</script>

移除事件监听

注:在移除事件监听时,要特别特别注意:如果我们想移除某个事件监听,那么该事件的处理程序必须是一个有名函数。

 

基本语法:

IE模型浏览器:

attachEvent(type,callback); 添加事件监听

detachEvent(type,callback); 移除事件监听

参数说明:

type:事件类型

callback:要移出的事件名称

 

W3C模型浏览器:

addEventListener(type,callback,capture); 添加事件监听

removeEventListener(type,callback);   移除事件监听

type:事件类型

callback:要移出的事件名称

 

解决兼容性问题:

<script type="text/javascript">

    /*

    *@param   obj           要操作的对象

    *@param   event         事件名

    *@param   callback      所要取消的方法

    */

    function removeEvent(obj , event , callback){

        //w3c 模型

        if(obj.removeEventListener){

            obj.removeEventListener(event , callback);

        }else{

            //ie模型

            obj.detachEvent(‘on‘+event , callback);

        }

    }

</script>

 

禁止事件冒泡

IE模型浏览器:

window.event.cancelBubble = true;

 

W3C模型浏览器:

function(event) {

event.stopPropagation();

 

解决兼容性问题:

<script type="text/javascript">

    /*

    *   @param   obj    要操作的对象

    *   @param   event  事件

    */

    function NoBubble(event){

        //ie模型

        if(window.event){ 

            window.event.CancelBubble = true;

        }else{

            //w3c模型

            event.stoppagation();

        }

    }

</script>

 

 

禁止js 默认行为

IE模型浏览器

window.event.returnValue = false;

 

W3C模型浏览器

function(event) {

event.preventDefault();

}

 

解决兼容性问题

<script type="text/javascript">

    /*

    * @param   event   事件名

    */

    function NoDefault(event){

        //ie模型

        if(window.event){

            window.event.returnValue = false;

        }else{

            event.preventDefault();

        }

    }

</script>

 

 

Window对象(以下注意)

l moveBy(xy) :窗口移动(相对移动)

l moveTo(xy) :窗口移动(绝对移动)

l resizeBy(xy) :调整窗口大小(相对大小)

l resizeTo(xy) :调整窗口大小(绝对大小)

l scrollBy(xy) :相对滚动

l scrollTo(xy) 绝对滚动

 

Jsvascript的系统常用类

字符串类

l length  :返回字符串长度

indexOf(string) :返回参数在字符串出现的位置

substr(num1,[num2]) :返回截取后的字符串

l toLowerCase() :返回小写

l toUpperCase() :返回大写

replace(str1,str2) :返回替换后的字符,把str2替换成str1

日期时间类

indexOf(string) :返回参数在字符串出现的位置

getFullYear() :返回完整年份 2015

l getHours() :返回小时

getTime() :返回毫秒时间戳

 

数学类

ceil(数值) :返回大于或等于该数的最小整数

floor(数值)  :返回小于或等于该数的最大整数

random() :返回0-1随机数

l round(数值:返回四舍五入后的结果

 

Javascript自定义类的使用( js中一切都是对象)

创建:

functions   构造器( ){ }

创建类的目的之一在于保存更多的变量

 

Javascript中三大关键字

alert( p.constructor );   :返回原型对象所指向的构造器

alert( typeof p );   :返回对象的数据类型

alert( p instanceof person ); :判断某个对象是否是某个类的实例

 

this指向小技巧:

JavaScript中,谁调用构造器,那么构造器中的this指针就指向谁。

 

Javascript中属性的删除

以通过delete方法对其删除。

 

基本语法:

delete 自定义对象.属性

 

Json对象

json对象就是一组数据的无序集合 ,这个集合是通过:对的形式进行表示的,在JavaScript可以通过一对花括号{}来定义这个集合

 

json对象的调用方式

基本语法:

json对象.

 

 

运行以上代码可知:

json属于一个对象,其构造是系统中的Object,其本质是Object类的一个实例。

 

原型对象及原型链

原型对象来自object

在原型对象创建过程中,系统会自动执行以下代码:

(Person.prototype) = new Object();

 

通过以上图解可知:

所有的原型对象其实质都是Object类的实例。

 

说明:在面向对象程序设计中,当系统执行以下代码

对象 = new ();

那么所创建的对象会自动拥有类中属性和方法。

 

通过以上代码可知:

所有的原型对象都会自动继承Object类中的所有属性与方法,当我们访问一个不存在的属性和方法时,系统首先会到当前构造器的原型对象中查找,又由于所有原型对象都是由Object构造器创建而来的,那么当我们访问一个不存在的属性或方法时,系统自动到Object构造器中去寻找。

原型继承

p1.address à Person构造器的原型对象àObject构造器 

 

原型链

 

说明:当系统加载Object构造器时,会自动生成Object原型对象,当我们访问一个不存在的属性或方法时,系统会到上一级的原型对象中去寻找,如找不到,会继续向上一级原型对象中寻找,我们把这种链式操作就称之为原型链

 

原型链:

p1对象.属性àPerson构造器的原型对象àObject构造器的原型对象à上一级原型对象寻找

 

证明:

 

 

 

object

Object类是所有类的基类

当我们创建原型对象时(系统、自定义),会自动执行以下代码:

.prototype = new Object();

原理图:

 

说明:当p1对象访问一个不存在的属性或方法时,系统会到Person构造器的原型对象去寻找,又由于原型对象是Object类的实例,所以原型对象会自动继承Object构造器的所有属性和方法,所以我们的p1对象会自动继承Object类中的所有属性和方法,我们把这种链式操作就称之为原型继承

 

证明Object类是所有类的基类 (hasOwnProperty)

Object类中有这样一个方法hasOwnProperty()主要用于判断当前对象是否具有某个属性,返回boolean类型的值,truefalse

 

静态属性

语法

.属性 或构造器.属性   Person.num

 

静态方法

JavaScript中,静态方法其主要用于操作静态属性

 

 

 

闭包

闭包,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

 

闭包即函数定义时,连同其定义环境的上下文,形成一个整体

不管该函数在哪儿运行,其对变量的访问,都要从定义处开始寻找

 

闭包的作用

1)读取函数内部的局部变量

2)让这些变量的值始终驻留在内存中

 

javaScript的中的垃圾回收机制详解

 

 

javascript 中的私有共有属性的模仿

公有属性:

基本语法:

this.属性公有属性

 

私有属性:

基本语法:

var 属性 私有属性

访问私有属性(闭包

 

 

callapply的定义和使用

call 的使用

基本语法:

call([thisObj[,arg1[,arg2[,argN]]]])

参数说明:

thisObj:要指向的对象

arg1arg2argN…:要传递的参数

 

aplay的使用

apply([thisObj[,argArray]]) 

参数说明:

thisObj:要指向的对象

[argArray]:要传递的参数,要求是一个数组

作用:使用指定的对象调用当前函数

 

javascript中类的继承的(模拟)实现

通过Object原型对象实现继承

基本语法:

Object . Prototype . ext = function ( parObject ){

for(var  i  in  parObject){

this[ i ] = parObject[ i ];

} 

};

示例代码:

 

 

通过callapply方法实现类的继承

 

 

通过原型对象实现类的继承

 

 

 

 

 

javascript 知识点梳理 -- 整理自广州传智王老师

标签:javascript   面向对象   继承   object   json   

原文地址:http://blog.csdn.net/u010657348/article/details/44875677

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!