ECMAscript5

来源:互联网 发布:vb编写简单整人小程序 编辑:程序博客网 时间:2024/05/19 18:37

ECMAscript5

一、预处理阶段

全局环境(就是window对象)

记录所在作用域代码中声明的变量

记录所在作用域代码中声明的函数

函数环境

同全局词法环境相同相同(记录所在作用域代码中声明的变量

记录所在作用域代码中声明的函数)

记录参数并赋值变量提升

alert(num);var num=10;

输出:undefined,因为变量提升,代码预处理阶段是这样的

num=undefined;alert(num);var num=10;

以下代码运行结果是什么?

<script>var  num = 10;function fun(){    alert(num);     var  num = 100;}   //局部变量fun() </script>预处理阶段:window{   num:undefinde;   fun:‘{alert(num);var num = 100;}’ }   函数环境{   num:undefined }

输出:Undefined()

二、变量的类型

值类型

Number Boolean String Null undefined

引用类型

Array Object。。。

变量的内存保存方式

//值变量保存在内存的栈区,变量之间复制数据,互不相干var name = 'tom';var name1 = name;name1 = 'jack';alert(name);        //输出tom//对象保存在内存的堆区,引用变量共同指向同一个对象,共享数据var p = new Object();p.name = 'tom';var p1 = p;p1.name = 'jack';alert(p.name);     //输出jack

二、作用域类型

全局作用域

函数作用域

三、作用域链

函数嵌套形成作用域的层级关系函数执行时,从当前作用域开始搜寻变量,如果没有 往上一级搜寻,一直到全局作用域为止

四、闭包

闭包是引用外部自由变量的函数

function  f1(){    var  a = 10;     var  b = 20;     function f2(){         console.log(a);}   //必须使用外部变量,形成闭包      f2();}f1()

1、特点

闭包的函数和自由变量一同存在,即使离开了创建环境

闭包的本质是作用域链

function  f1(){    var  a = 10;     var  b = 20;     return  function f2(){         console.log(a);      }}var result = f1();result();

闭包的应用

减少全局变量的定义

封装对象的成员

闭包的缺点

内存无法释放

逻辑错误

五、对象

js中构造函数名大写开头

Javascript中可以采用简便的字面量方式创建对象

var obj = {         stuName:‘Tom’,          stuSex:‘男’,         stuAge:20,          sayHello:function(){                alert(“你好!”);           }   }

创建对象简便快捷,属性和值映射关系清晰

主要适用于一个实例对象的场合,缺乏封装性和重用

Object方式创建对象

var person = new Object();     //创建对象person.name = nameperson.age = age;person.sayHi = function(){       alert(‘你好!我是’ + this.name);}

封装Object方式创建对象

function createObject(name,age){ var person = new Object();     //创建对象person.name = nameperson.age = age;person.sayHi = function(){       alert(‘你好!我是’ + this.name);}return person;}

封装Object创建对象的方式也称为工厂模式

对象的属性可以动态添加,结束时需要返回

对象存在的不足是无法辨别对象的具体类型

构造函数方式

function Human(name,age){       this.name=name;          this.age=age;     this.show = function(){         alert(‘你好!我是’ + this.name);      }    }

构造方法在创建对象时发挥作用,不创建对象时和普通方法相同

构造方法名首字母大写,通过new关键字创建实例对象

var peo=new Human("hu",23);

构造方法中不需要创建对象,也不用返回,依靠this关键字实现属性的设置

构造方法的对象是独立存储的,缺少共享,内存空间消耗较大

原型方式

function Human(){} Human.prototype.name =“tom”; Human.prototype.age = 22; Human.prototype.show = function(){       alert(‘你好!我是’ + this.name); }

原型方式实现对对象成员的共享,节省存储空间

引用导致实例对象的相互影响

混合方式

function Human(name,age){    this.name=name;     this.age=age;} Human.prototype.country =“CHN”;Human.prototype.show = function(){       alert(‘你好!我是’ + this.name); }

混合方式结合了构造函数方式和原型方式

构造函数方式用于定义实例的属性,而原型方式用于定义方法和共享的属性

支持向构造函数传递参数

六、继承

1、类继承

通过call、apply方法实现类的继承

function Human(name,age){    this.hand = 2;    this.head = 1;    this.name = name;    this.age = age;    this.show = function(){        alert('我是' + this.name)    }}function Student(name,age){    //Human.call(this,name,age);                //call方式实现继承    Human.apply(this,[name,age]);               //apply方式实现继承}var student = new Student('tom',20);student.show();

2、原型组合继承

通过原型和构造函数实现继承

 <script>        function Father(name){            this.name=name;            this.color=["red","yellow"]        }        Father.prototype.sayName=function () {            alert(this.name)        };        function Son(name,age) {             Father.call(this,name);         //构造函数继承             this.age=age;        }        Son.prototype=new Father();     //原型继承,原型对象等于另一个类型的实例        Son.prototype.sayAge=function () {            alert(this.age)        };        var demo1=new Son('hu',20);        demo1.color.push("black");        //输出red,yellow,black        alert(demo1.color);        demo1.sayName();                 //输出hu        demo1.sayAge();                //输出 20    </script>

七、面向对象

对象是属性的集合

函数和对象的关系

对象都是通过函数生成的(new)

函数也是一种对象

函数的prototype属性指向原型对象,原型对象中的constructor指向函数

对象具有隐性属性proto,指向原型对象

//对象和函数的关系//通过new+构造函数创建实例对象var obj1 = new Object();var obj2 = new Object();//不同的实例对象通过__proto__访问相同的原型对象alert(obj1.__proto__ === obj2.__proto__);//通过构造函数的proto也可以访问原型对象alert(obj1.__proto__ === Object.prototype);//原型对象中具有一个constructor属性,该属性指向构造函数console.log(Object.prototype);
原创粉丝点击