JavaScript学习笔记（五）

2024-12-25 技术教程

本课程学习视频教程：http://edu.51cto.com/course/15019.html

1、javascript的面向对象1.1、创建对象的方式

方式一：使用object对象搞定

<script type="text/javascript"> //创建一个对象 var object = new Object(); //在js中对象可以动态的添加属性和方法 object.name = "张三"; object.age = 15 ; //动态添加方法 object.sayHello=function(){ console.log(this.name,this.age); }; //动态删除某个对象的方法或者属性 delete object.sayHello; //object.sayHello(); console.log(object);</script>

方式二：json格式

json的格式：

var stu={ name:"zhangsan", addr:"南京", age:15, say:function () { console.log(this.name,this.age,this.addr); } } stu.say();

json数组：

value的变化多端

方式三：工厂方法

function createObject(name,age){ var object = new Object(); object.name = name; object.age=age; object.say=function(){ console.log(this.name,this.age); } return object ;}//创建对象var object1 = createObject("张三",15);//调用方法object1.say();//创建对象var object2 = createObject("李四",20);//调用方法object2.say();

方式四：构造函数

题外话

function Person(){ console.log(this.name,this.age);}//函数的普通调用方式window.name="hello";window.age=15;Person();Person();默认直接调用函数实际上调用的对象是window对象

创建对象

<script type="text/javascript"> function Person(name,age){ this.name = name this.age = age; this.say=sayInfo; } function sayInfo(){ console.log(this.name,this.age); } //采用new的方式调用实际上省略了创建对象和返回对象的过程 var p1 = new Person("张三",15); var p2 = new Person("李四",20); p1.say(); p2.say(); </script>

方式五：原型模式

利用的原理就是动态添加方法，转移this的指向

<script type="text/javascript"> function Parent(name) { console.log(this); this.name = name ; } function Son(name,age) { //Parent(name); this.method=Parent; this.method(name); //将这个method方法在动态删除掉 delete this.method; //子类特有的 this.age = age ; } var s = new Son("张三",15); console.log(s.name,s.age); </script>1.2.2、apply和call方式

call方法介绍

call 方法:调用一个对象的一个方法，以另一个对象替换当前对象。call([thisObj[,arg1[, arg2[, [,.argN]]]]])参数thisObj:可选项。将被用作当前对象的对象。arg1, arg2, , argN:可选项。将被传递方法参数序列。

使用call方法来改写上面的案例

<script type="text/javascript"> function Parent(name) { console.log(this); this.name = name ; } function Son(name,age) { Parent.call(this,name); //子类特有的 this.age = age ; } var s = new Son("张三",15); console.log(s.name,s.age); </script>

apply：和call用法基本一致

apply 方法:应用某一对象的一个方法，用另一个对象替换当前对象。apply([thisObj[,argArray]])参数:thisObj可选项。将被用作当前对象的对象。argArray：可选项。将被传递给该函数的参数数组。

apply方式来改写案例

<script type="text/javascript"> function Parent(name) { console.log(this); this.name = name ; } function Son(name,age) { Parent.apply(this,[name]); //子类特有的 this.age = age ; } var s = new Son("张三",15); console.log(s.name,s.age);</script>1.2.3、采用原型+apply的混合方式实现继承

补充知识点：

callee :返回正被执行的 Function对象，也就是所指定的 Function 对象的正文

function factorial(n){ if (n <= 0) return 1; else return n * arguments.callee(n - 1) }console.log(factorial(5));

eval()：执行eval参数中js代码

eval("var mydate = new Date();"); alert(mydate);

练习：

编写一个形状类，它是一个父类

然后编写一个长方形类，要求求出长方形的周长

在编写一个三角形类，求出三角形的周长

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function Shape(width){ this.width=width; } Shape.prototype.getLength=function(){ console.log('正在获取长度'); }; function Rectangle(width,height){ Shape.call(this,width); this.height = height; } Rectangle.prototype = new Shape(); Rectangle.prototype.getLength=function(){ return (this.width+this.height)*2; }; //创建一个长方形对象 var re = new Rectangle(10,20); console.log(re); console.log(re.getLength()); //对象的__proto__恒等于Rectangle.prototype属性 //console.log(re.__proto__===Rectangle.prototype); console.log(1=="1"); //先比较数据类型，如果数据类型不一样，就直接over（false） console.log(1==="1"); //创建一个三角形的类 function Triangle(width,height,c){ Shape.call(this,width); this.height=height; this.c = c ; } Triangle.prototype = new Shape(); Triangle.prototype.getLength = function(){ return this.width+this.height+this.c; } var tr = new Triangle(1,2,3); console.log("三角形的长度为："+tr.getLength()); </script></head><body></body></html>