JavaScript学习笔记-原创手记-慕课网

1、javascript的面向对象

1.1、创建对象的方式

方式一：使用object对象搞定

//创建一个对象

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的格式：

mark

var stu={

name:"zhangsan",

addr:"南京",

age:15,

say:function () {

console.log(this.name,this.age,this.addr);

}

stu.say();

json数组：

mark

value的变化多端

mark

var students=[

{

name:"关羽",

type:"坦克"

{

name:"阿珂",

type:"刺客"

{

name:"老亚瑟",

type:"坦克"

{

name:"王昭君",

type:"法师"

}

]

for(var i = 0;i<students.length;i++) {

console.log(students[i].name,students[i].type)

}

</script>

方式三：工厂方法

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();

默认直接调用函数实际上调用的对象是window对象

创建对象

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>

方式五：原型模式

//构造中一般放属性

function Person(name,age){

this.name = name ;

this.age = age ;

}

//通过prototype属性，我们可以原型上加上方法和属性

Person.prototype.say=function(){

console.log(this.name,this.age);

};

Person.prototype.sayWorld=function(){

console.log("helloworld");

};

var p1 = new Person("zhangsan",15);

var p2 = new Person("lisi",16);

console.log(p1);

console.log(p2);

p1.sayWorld();

p2.sayWorld();

</script>

1.2、继承

1.2.1、对象冒充方式

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

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方法来改写上面的案例

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方式来改写案例

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的混合方式实现继承

function Parent(name) {

console.log(this);

this.name = name ;

}

//父类的方法

Parent.prototype.sayHello=function(){

console.log("helloworld");

}

function Son(name,age) {

Parent.apply(this,[name]);

//子类特有的

this.age = age ;

}

//将父类原型上的属性和方法移植子类中

Son.prototype=new Parent();

var s = new Son("张三",15);

console.log(s.name,s.age);

s.sayHello();

</script>

补充知识点：

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>

<head>

<title>Title</title>

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>