网站首页 网站导航 课程中心
新闻中心
您所在的位置:Web前端培训 > 新闻中心 > 【web前端培训】javascript快速入门(二)

【web前端培训】javascript快速入门(二)

来源:中软卓越 日期:2018-05-04 13:52 人气:
标签:
中软国际教育集团Python+大数据课程入驻大武汉啦!!!
this关键字
 
在js中有一个this关键字,表示当前调用的该方法的对象,看下面代码:

<script type="text/javascript">
    function Person() {
        this.name = "zhangsan";
        this.age = 20;
    }
    var p1 = new Person();//此时this表示p1
    var p2 = new Person();//此时this表示p2
 
    alert(p1.name+"=="+p1.age);
    alert(p2["name"]+"=="+p2["age"]);
</script>

我在声明Person类的时候就为两个属性name和age分别使用this指针附上了对应的值.此时p1和p2对象都拥有name和age属性,并且修改了一个另外一个是保护不变的,此时这两个对象之间是互不干扰的。

向构造函数传递参数
 
上面的代码,每次new一个新的person对象的时候,这些对象的name和age属性的值都是一样的,我们可以通过给构造方法传递参数来解决该问题。

<script type="text/javascript">
    function Person(name,age) {
        this.name = name;
        this.age = age;
    }
    var p1 = new Person("zhangsan",22);
    var p2 = new Person("lisi",33);
 
    alert(p1.name+"=="+p1.age);
    alert(p2["name"]+"=="+p2["age"]);
</script>

此时p1和p2对象默认的name和age属性就不同了。

使用delete删除对象的属性
 
可以通过js中的delete关键字来删除某一个对象的属性,看下面代码:

<script type="text/javascript">
    function Person(name,age) {
        this.name = name;
        this.age = age;
    }
    var p1 = new Person("zhangsan",22);
    var p2 = new Person("lisi",33);
 
    delete p1.name;//删除p1对象的name属性
    alert(p1.name+"=="+p1.age);//打印结果:undefined==22
    alert(p2["name"]+"=="+p2["age"]);//打印结果:lisi==33
</script>

javascript静态属性
 
在java中我们可以使用static关键字来将一个属性描述为类的静态属性,虽然在JavaScript中没有类似的关键字不过我们可以模拟一个静态属性。
语法如下:

类名.属性 = 值 //表示当前类的静态属性
类名.属性 = function() {
 
}//表示当前类的静态方法

JavaScript闭包
 
闭包的功能:
 
    可以访问局部变量
    使变量所占的内存不会被释放
    先看下面这段代码:
 
<script type="text/javascript">
    window.onload = function() {
        function fun1() {
            function fun2() {
                alert("this is alert by fun2");
            }
            return fun2;//在fun1方法中,将内部的fun2方法返回
        }
 
        var test = fun1();//此时test指向fun2方法的首地址
        test();//执行fun2方法,弹出alert("this is alert by fun2");
 
    }
 
</script>

从上面的代码可以看出,变量可以指向一个函数的首地址,并且一个函数也可以返回另一个函数。
 
下面我将上面的代码改进一下:

window.onload = function() {
        function fun1() {
            var num = 22;
            function fun2() {
                alert("the local num is :"+num);
            }
            return fun2;//在fun1方法中,将内部的fun2方法返回
        }
 
        var test = fun1();//此时test指向fun2方法的首地址
        test();//执行fun2方法,弹出alert("the local num is :22");
 
    }

可以看到,这里我在fun1函数中增加了一个局部变量num,发现在fun1函数执行完成之后依然可以访问到该局部变量的值。是因为虽然fun1函数执行完成了,但是fun2函数内部引用了局部变量num,因此num是不会被释放的,正好此时test指fun2函数的首地址,因此执行test就是执行fun2
 
可以发现只要我们使用一个局部函数引用局部变量,此时局部变量的内存就不会被回收,这样就形成了函数闭包。

JavaScript模拟私有属性
 
在JavaScript中不想java那样提供了一个特有的private关键字来指明当前属性是一个私有属性,不过我们可以使用JavaScript特有的属性来模拟出一个类的私有属性。
语法如下:

function 类名(arg1,arg2) {//注意这里的arg1,arg2表示形参。
    var name = arg1;//此时name是私有属性
    this.age = arg2; //此时age是共有属性
}

看下面示例代码:

window.onload = function() {
        function Person(name,age) {
            this.name = "zhangsan"; //this指向当前调用该方法的对象,因此p1可以访问到name属性
            var age = age; //此时由于age使用var声明,所以是局部变量,因此外部不能访问到
        }
 
        var p1 = new Person("zhangsan",22);
        alert(p1.name+"=="+p1.age);//打印结果:zhangsan==undefined
 
    }

这里虽然通过var声明的属性我们不能再外部访问了,可是如果该变量我们无法获取和设置其值,又有什么用呢??下面我们来添加一个类似于java当中的get和set方法来解决这个问题。看下面代码:

 function Person(name,age) {
            this.name = "zhangsan"; //this指向当前调用该方法的对象,因此p1可以访问到name属性
            var age = age; //此时由于age使用var声明,所以是局部变量,因此外部不能访问到
 
            //通过this为当前调用该方法的对象设置一个getAge方法,用来获得局部变量age的值
            this.getAge = function(){
                return age;
            };
            //通过this为当前调用该方法的对象设置一个setAge方法,用来设置局部变量age的值
            this.setAge = function(a) {
                age = a;
            };
        }
 
        var p1 = new Person("zhangsan",22);
        //通过getAge方法获得局部变量age的值
        alert(p1.name+"=="+p1.getAge());//打印结果:zhangsan==22
        p1.setAge(11); //重新为age设置值
        alert(p1.getAge()); //打印结果:11

JavaScript中apply和call方法的使用
 
我们都知道在JavaScript的方法中,如果那个对象调用了该方法,那么内部的this就表示那个对象,我们可以使用apply和call任意方法来指定当前调用的对象。
语法如下:

call(那个对象调用,arg1,arg2,arg3,....argN);
apply(那个对象调用,[arg1,arg2,arg3,....argN]);

先看如下代码:

window.onload = function() {
        function Person(name,age) {
            this.name = "zhangsan"; 
            var age = age; 
 
        }
 
        function sayHello() {
            alert(this.constructor); //通过打印的constructor判断当前this表示那类对象
            alert("hello world");
        }
 
        var p1 = new Person("zhangsan",22);
        //p1.sayHello(); 此时不能使用p1调用sayHello方法,因为p1没有改方法。
    }

此时由于sayHello方法不属于p1因此p1也就无法调用该方法。
不过我们可以通过如下方式调用sayHello方法:

sayHello.call(p1);
sayHello.apply(p1);

此时打印出的构造方法如下: 
注意这里当不带参数的时候,apply和call的用法是相同的。
下面为sayHello方法加上两个参数:

function Person(name,age) {
            this.name = "zhangsan"; 
            var age = age; 
 
        }
 
        function sayHello(hello,world) {
            alert(this.constructor); //通过打印的constructor判断当前this表示那类对象
            alert(hello+"---"+world);
        }
 
        var p1 = new Person("zhangsan",22);
        //p1.sayHello(); 此时不能使用p1调用sayHello方法,因为p1没有改方法。
        sayHello.call(p1,"hello","world");
        sayHello.apply(p1,["hello","world"]);

可以看到,call和apply方法的意义是相同的,不同的是当被调用的参数需要传递参数的时候,参数的传递不同而已。

JavaScript继承
 
在java中,我们可以通过extends关键字来实现继承到指定的类,在JavaScript中并没有给我们提供相应的实现,不过我们可以通过特定的语法来实现JavaScript的继承。
语法如下:

子类.prototype = new 父类();

下面我实现一个简单的student类继承自person类的栗子:

 function Person(name,age) {
            this.name = name;
            this.age = age;
            this.sayHello = function() {
                alert(this.name+"==="+this.age);
            }
        }
 
        function Student(id,name,age) {
            this.id = id;
            this.read = function() {
                alert(this.id+"=="+this.name+"==="+this.age);
            }
        }
 
        Student.prototype = new Person("zhangsan",11);//表示Student类继承自Person类
        var student = new Student(1001);
 
        student.read();
        student.sayHello();//此时的sayHello是调用从父类中继承的方法

此时运行效果如下: 

可以看到student类中并没有sayHello方法,而调用的正是从父类继承过来的。


免责声明:本文转载自网络,转载目的在于传递更多信息,版权归原作者所有,如涉及内容、版权和其它问题请联系我们进行删除。




中软卓越是中软国际有限公司投资的大型人才服务机构,是中软国际人才战略的核心组成部分之一,承担集团发展过程中人才储备和培养的任务,是软件及外包业务快速发展的重要人才支撑平台,是集团保持高速增长动力之一。

中软国际教育集团专注IT教育36年,一直秉承“用良心做教育”的理念,是中国移动互联网研发人才一体化服务的开拓者,全力打造移动互联网研发人才服务优质平台。

公司总部位于武汉,目前已在深圳、上海、郑州、广州、大连、武汉、成都、西安、杭州、重庆、长沙、合肥、无锡、南宁、厦门、南京、南昌等全国22个省成立了60多家分公司。拥有全国的移动互联网教学就业保障团队,做到了毕业学员业内高薪水,成为学员信赖的IT培训机构。

营业执照 版权所有©Copyright 2008-2017,武汉中软卓越科技有限公司 , All Rights Reserved. ICP备案号:15018648号-1

sitemap | 来校路线 | 分类导航 | 关于我们