第一部分：Javascript面向对象基础
一、用定义函数的方式定义类：
在OOP的思想中，类是一个很重要的元素，一个类表示了具有相似的一类事物的抽象，通过实例化一个类，可以获得属于该类的一个实例，即对象。
在javascript中，我们定义一个函数，也可以看着是类。
function class(){
code; //类成员的定义以及构造函数
}
上面class我们可以将他看着为类的构造函数，来实现初始化工作。
JS中暂时没有CLASS这个类的关键字，所以我们暂时使用function来实现类的定义。(es6已经有class关键字)
类在定义好之后，如果没有定义静态方法时，我们是不能直接使用的，我们需要先实例化一个类。
当然，JS也不例外的使用new这个关键字来实现对类的实例化。
// demo.js
function Test() {
alert('hello，js');
}
// demo.html
<script src="../oop/demo.js"></script>
<script>
function testFunc(){
let test = new Test();
alert(typeof (test));
}
</script>
<body>
<h1>Javascript Oop Demo</h1>
<button value="test" onclick="testFunc()">查看调用结果
</button>
</body>
image.png
image.png
我们可以这么简单的理解，在javascript中，函数和类是就是一个概念。
当对一个函数进行new操作是，就返回一个对象，如果函数中没有初始化类成员，就会返回一个空对象。
当 new一个函数时，这个函数就代表类的构造函数，其中的代码被看做初始化了一个对象。
用于表示类的函数我们也称之为构造器。
二、引用对象的属性和方法
在JAVASCRIPT中，每个对象可以看做是多个属性（方法）的集合，引用一个属性（方法）一般采用 :
对象名.属性（方法）名 或 对象名["属性（方法）名"]
例如：
var arr = new Array(); //定义一个数组
arr.push('xiaozu'); //为数组增加一个元素
arr["push"]("zhangsn"); //使用[]引用对象的属性和方法
var $length = arr.length; //获取数组长度
var $len = arr["length"]; //获取数组长度
document.write($length+"<br>");
document.write($len);
我们做个下拉菜单的案例：
<script>
//定义一个User类，包含两个成员，并指定初始值
function User(){
this.age = 21;
this.sex='male';
}
//实例化user对象
let user = new User();
//根据下拉列表框显示用户信息
function show(slt) {
if(slt.selectedIndex!=0){
alert(user[slt.value]);
}
}
</script>
</head>
<body>
<!--下拉列表框用于选择用户信息--->
<select onchange="show(this)">
<option>请选择需要查看的信息：</option>
<option value="age">年龄</option>
<option value="sex">性别</option>
</select>
</body>
这段代码，使用一个下拉列表框让用户选择查看哪个信息，每个选项的value就表示用户对象的属性名称。
三、动态添加、修改、删除对象的属性和方法
上面，我们已经了解如何引用一个对象的属性和方法，现在我们来了解如何为一个对象添加、修改或则删除属性和方法。
Javascript提供了灵活的机制来修改对象行为，可以动态添加、修改、删除属性和方法。
例如，我们先用类Object来创建一个空对象user：
// 添加属性和方法：
var user = new Object(); //创建一个空对象user
user.name = 'xiaozu'; //添加属性
user.age = '18';
user.sex = 'male';
document.write(user.name+"<br />"); //输出这三个语句
document.write(user.age+"<br />");
document.write(user.sex+"<br />");
user.getName =function(){ //添加一个方法
document.write("My name is:"+this.name+"<br/>");
}
user.getName(); //调用这个方法
修改属性和方法：
修改一个属性和方法的过程就是用新的属性替换旧的属性
删除属性和方法：
删除一个属性和方法就是讲其设置为undefined。
user.name = undefined;
user.alert = undefined;
也可以使用 delete user.name 来删除一个属性。
四、 创建无类型对象
JavaScript中的对象其实就是属性（方法）的一个集合，并没有严格意义上的类的概念。
它提供了一种简单的方式来创建对象，通过使用大括号括住多个属性或方法及其定义（这些属性或方法用逗号隔开），来实现对象的定义。
这段代码就直接定义了具有N个属性或方法的对象，其中属性名和其定义之间用冒号（：）隔开。
var $obj = {}; //定义个空对象
var $user={
//定义了name属性，初始化为xiaozu
$name:"xiaozu",
//定义了sex属性，初始化为male
$sex:"male",
//定义hello方法
hello:function(){
document.write("hello,"+this.$name);
}
}
//调用user对象的方法hello
$user.hello();
五、prototype原型对象
是实现面向对象的一个重要机制。
每个函数（function）其实也是一个对象，他们对应的类是“Function”。
每个函数对象都具有一个子对象prototype。
即prototype表示该函数的原型，而函数也是类。
prototype就是表示了一个类的成员的集合。
当通过new来获取一个类的对象时，prototype对象的成员都会成为实例化对象的成员。
function $class1(){
//empty
}
$class1.prototype.method=function(){
//对类的prototype对象进行修改，增加method方法
alert("it is a test method");
}
//创建类$class1的实例
var $obj1 = new $class1();
//调用$ogj1的方法method
$obj1.method();
第二部分、深入认识Javascript中的函数
一、概述：
函数是进行模块化程序设计的基础， javascript重的的函数不同于其他语言，每个函数都作为一个对象被维护和运行。通过函数对象的性质，可以很方便的将一个函数赋值给一个变量或则讲函数作为参数传递。
二、认识javascript中的函数
javascript可以用function关键字定义一个函数，并为每个函数指定一个函数名，通过函数名来调用。
在javascript解释执行时，函数都是被维护为一个对象，这就是函数对象（Function Object）.
函数对象与其他用户所定义的对象有着本质的区别，这一类对象被称之为内部对象。
例如：日期对象（Date）、数组对象（Array）、字符串对象（String）都属于内部对象。
这些内置对象的构造器是由JavaScripy本身所定义的，通过执行Array（）这样的语句返回一个对象，javascript内部有一个套机制来初始化返回的对象，而不是由用户来指定对象的构造方式。
在javascript中，函数对象对应的类型是Function，正如数组对象对应的是Array，日期对象对应的类型是Date一样，可以通过new Function()来创建一个函数对象，也可以通过function关键字来创建一个对象。
function myfunction($a,$b) { //传统写法
var $res = $a + $b;
document.write($res);
return $res;
}
我们采用另外一种写法：
var $myfunction = new Function("$a","$b","var $res=$a+$b;document.write($res);return $res;")
</script>
<body>
<h1>测试</h1>
<button onclick="$myfunction(5,12)">JS测试</button>
</body>
var funcName = new Function(p1,p2,......,pn.body);
参数的类型都是字符串，p1到pn表示所创建函数的参数名称列表，body表示所创建函数的函数体语句，funcName就是所创建函数的名称。
可以不指定任何参数创建一个空函数，不指定funcName创建一个无名函数，当然那样的函数没有任何意义。
需要注意的是，p1到pn是参数名称的列表， p1不仅代表一个参数，它也可以是一个逗号隔开的参数列表。
javascript引入Function类型类型并提供new Function()这样的语法是因为函数对象添加属性和方法就必须借助于Function这个类型。
函数本质是一个内部对象，由javascript解释器决定其运行方式，通过上述代码创建的函数，在程序重可以使用函数名进行调用。直接在函数声明后面加上括号就表示创建完成后立即进行函数调用。
三、函数对象和其他内部对象的关系
除了函数对象，还有很多内部对象，比如：Object、Array、Date、RegExp、Math、Error。
这些名称实际上表示一个类型new操作符返回一个对象。然而函数对象和其他对象不同，当用typeof得到一个函数对象的类型时，它仍然会返回字符串‘function’,而typeof一个数组对象或其他的对象时，它会返回字符串'object'。
尽管函数本身也是一个对象，但它与普通的对象还是有区别的，应为它同事也是对象构造器，也就是说，可以NEW一个函数来返回一个对象。
Function是所有函数对象的基础，而Object是所有对象（包括函数对象）的基础。在javascript中，任何一个对象都是Object的实例。因此，可以修改Object这个类型来让所有对象具有一个写通用的属性和方法，修改Object类型是通过prototype来完成的。
四、将函数对象作为参数传递
每个函数都被表示为一个特殊的对象，可以方便的将其赋值给一个变量，再通过这个变量名进行函数调用。作为一个变量，它可以以参数的形式传递给另一个函数。
function func1(theFunc){
theFunc();
}
function func2(){
alert("good");
}
func1(func2);
五、aguments
当进行时函数调用时，出料指定的参数外，还创建了一个隐藏的对象arguments。arguments是一个类似数组但不是数组的对象。它具有数组一样的访问性质，可以用arguments[index]这样的语法取值，拥有数组长度属性length。arguments对象存储的是实际传递给函数的参数，而不局限于函数声明所定义的参数列表。
function funName($a,$b){
document.write($a+"<br />");
document.write($b+"<br />");
for(var $i=0;$i<arguments.length;$i++){
document.write(arguments[$i]+"<br />");
}
}
funName(2,4,6,8,10);
arguments对象的另一个属性是callee，它表示对函数对象本身的引用，这有利于实现无名函数的递归或则保证函数的封装性。
六、JavaScript中的this指针
JavaScript可以使用this指针来获得该对象自身的引用。this指针是一个动态变量，一个方法内的this指针并不是始终指向定义该方法的对象。列如：
//创建两个空对象
var $obj1 = new Object();
var $obj2 = new Object();
//给两个对象都添加属性 att,分别等于1和2
$obj1.att = 1;
$obj2.att = 2;
//给$obj1 新增一个方法，用来显示att的值
$obj1.getAtt = function(){
document.write(this.att);
}
$obj1.getAtt();
//让$obj2的gerAtt方法等于$obj1的getAtt方法
$obj2.getAtt = $obj1.getAtt;
$obj2.getAtt();
javascript中的this指针是一个动态变化的变量，表明了当前运行该函数的对象。一个对象就是由一个或多个属性（方法）组成的集合。每个集合元素不是仅仅属于一个集合，而是可以动态的属于多个集合。这样，一个方法（集合元素）由谁调用，this指针就指向谁。
七、函数的apply、call方法的运用
javascript为函数对象定义了两个方法：apply和call。他们的作用都是讲函数绑定到另外一个对象上去运行。
Function.prototype.apply(thisArg.argArray);
Function.prototype.call(thisArg[,arg1[,arg2...]]);
网友评论