JavaScript虽然名字中有个Java但其实和Java没有什么关系,只不过当时发布的时候,Java比较火热,大约想借一下名气而以,而JavaScript也并非是面向对象的语言,虽然平时我们也可以简单使用一下,实际上很多地方如果去深究我们都会很困惑,本人就深有同惑,近日与朋友就面向对象及一些不解之处进行了一番交流讨论,如下:
- function的定义式声明与变量式声明的区别
- this在javascript中代表什么
- prototype是什么?
- 如何实现一个简单的面向对象
1.function的定义式声明与变量式声明的区别
function在javascript中有两种声明方式,如下:
//定义式 function say(){}
//变量式 var say = function(){}
这两种方式是等同的吗?答案是否定的。
1-1
<script type="text/javascript">
var say = function(){
alert('say--1');
}
say();
var say = function(){
alert('say--2');
}
say();
</script>
输出:say--1 say--2
1-2
<script type="text/javascript">
function say(){
alert('say--1');
}
say();
function say(){
alert('say--2');
}
say();
</script>
输出:say--2 say--2
变量式声明是按顺序执行的,而定义式的声明,javascript是首先拿出来解释一下,所以1-2中第二个定义式声明把第一个给覆盖了
1-3
<script type="text/javascript">
function say(){
alert('say--1');
}
say();
</script>
<script type="text/javascript">
function say(){
alert('say--2');
}
say();
</script>
输出:say--1 say--2
这个例子说明其实javascript是解释一段执行一段的,当然这个执行的过程有待进一步深入
2.this在javascript中代表什么
我想这个问题也是很多同学不解不处,为了搞清楚,我们来个对比,先来看一段java代码:
package com.test;
public class Student{
private String name;
public Student(String name){
this.name=name;
}
public void say(){
System.out.println("hello,"+this.name);
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public static void main(String[] args) {
Student stu = new Student("Tom");
stu.say();
}
}
当执行stu.say() 的时候,say方里的this就是当前的实例 stu
再来看一段javascript的
2-1
<script type="text/javascript">
window.name="currWindow";
function say(){
alert(this.name);
}
say();
</script>
输出:currWindow
显然this此时代表的是window这个对象,为什么是这样,有人不解,但很好解释,say(); 这种调用方式是一种简写,完整的应该是window.say(); 由此可见这里的this其实和一般的面向对象语言也差不多,也是调用这个方法的对象
2-2
<script type="text/javascript">
window.name="currWindow";
var stu = {name:"Tom",hello:say};
function say(){
alert(this.name);
}
stu.hello();
</script>
输出:Tom
2-3
<script type="text/javascript">
window.name="currWindow";
var stu = {name:"Tom",hello:function(){
alert(this.name);
say();
}};
function say(){
alert(this.name);
}
stu.hello();
</script>
输出:Tom currWindow
是不是对2-3有些不解,写成这样呢
2-4
<script type="text/javascript">
window.name="currWindow";
var stu = {name:"Tom",hello:function(){
alert(this.name);
window.say();
}};
function say(){
alert(this.name);
}
stu.hello();
</script>
上述说了一通,javascript没特别之处,下面来特别的地方吧,在java语言或者说一般的面向对象语言中,this就是当前的实例对象,这个是不可改变的,而在javascript中确是可以指定当前对象的,这也是它独有的
2-5
<script type="text/javascript">
window.name="currWindow";
var stu1 = {name:"Tom1"}
var stu2 = {name:"Tom2"}
function say(){
alert(this.name);
}
say.call(stu1);//等同于stu1.say()
say.call(stu2);//等同于stu2.say()
</script>
输出:Tom1 Tom2
还可以带参数,另外还有一个apply方法功能和它一样,只是参数签名不一样
2-6
<script type="text/javascript">
window.name="currWindow";
var stu = {name:"Tom"}
function say(age,grade){
alert(this.name+"-"+age+"-"+grade);
}
say.call(stu,1,2);//等同于stu.say(1,2)
say.apply(stu,[10,20]);//等同于stu.say(10,20)
</script>
输出:Tom-1-2 Tom-10-20