JavaScript面向对象简易实现

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