面向对象
面向对象的特征：抽象、封装、继承、多态、重载
ES5中面向对象的写法
(推理过程课堂演示)
|
1
2
3
4
5
6
7
8
|
function
Person(name,age){
this
.name = name;
this
.age = age;
}
Person.prototype.say =
function
(){
console.log(
"我会说话..."
)
}
var
p1 =
new
Person(
"web"
,30 );
|
缺陷：代码分成两块，不便于代码的逻辑管理
原型链
实例对象与原型之间的链接，叫做原型链（也叫隐式原型__proto__）
原型链的最外层 : Object.prototype
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
function
Fn(){}
Fn.prototype.num = 10;
var
f =
new
Fn();
alert(f.num);
//这里就是通过原型链，拿到到num的 10
function
Fn(){
this
.num = 20; }
Fn.prototype.num = 10;
var
f =
new
Fn();
alert(f.num);
//这里都定义了num, 那么构造函数中的num优先级高 20
function
Fn(){
//this.num = 20; }
//Fn.prototype.num = 10;
Object.prototype.num = 30;
var
f =
new
Fn();
alert(f.num);
//30
|
总结：原型对象上有的属性和方法，实例对象都可以根据原型链找到，如果过冲突就看谁先出现，谁先出现就用谁的。（有指定的用指定的，无指定继承最近的）
原型对象下的属性和方法
constructor属性
每个构造函数都有一个原型对象，该对象下有一个默认属性constructor指向该构造函数。那么实例对象可以通过原型链也找到该属性。
|
1
2
3
4
5
6
7
8
|
function
Fn(){}
var
f=
new
Fn();
console.log(Fn.prototype.constructor);
//Fn
console.log(f.constructor)
//Fn
var
obj={name:
'lc'
}
console.log(obj.constructor);
//?
var
arr=[];
console.log(arr.constructor);
//?
|
利用该属性可以检测实例对象是不是由该构造函数实现的。（检测对象数据类型）
注意：constructor属性不能被for…in遍历的到
不经意修改了constructor
|
1
2
3
4
5
6
7
8
9
10
|
function
Fn(){}
// Fn.prototype.name = '小明';
// Fn.prototype.age = 20;
Fn.prototype = {
//constructor : Fn,
name :
'小明'
,
age : 20
};
var
f =
new
Fn();
console.log( f.constructor );
//?
|
hasOwnProperty（）方法
每个构造函数的原型对象下都有一个继承自Object对象下的hasOwnProperty()方法，该方法是用来测试自己身上是不是包含该属性。如果包含则返回true，不包含则返回false。参数是字符串形式的属性。
|
1
2
3
4
5
|
var
obj={name:
'lc'
}
Object.prototype.name=
"abc"
;
console.log(obj.hasOwnProperty==Object.prototype.hasOwnProperty);
//?
console.log(obj.hasOwnProperty(
'name'
));
//?
console.log(Object.prototype.hasOwnProperty(
'name'
));
//?
|
独特的toString()方法
本地对象下面都是自带的 , 自己写的对象都是通过原型链找object下面的
|
1
2
3
4
5
6
7
|
var
arr = [];
alert( arr.toString == Object.prototype.toString );
//false
//这个arr.toString其实是原型对象Array.prototype.toString
function
Fn(){ }
var
f =
new
Fn();
alert( f.toString == Object.prototype.toString );
//true
|
toString()方法的作用
1、把对象转成字符串
|
1
2
3
4
5
6
|
var
arr = [1,2,3];
//改写本地对象下的toString方法
Array.prototype.toString =
function
(){
return
this
.join(
'+'
);
};
alert( arr.toString() );
//'1+2+3'
|
2、进制转换
|
1
2
3
4
5
6
|
var
num = 255;
alert( num.toString(16) );
//'ff'
3、判断对象的数据类型
var
arr = [];
// alert( Object.prototype.toString.call(arr) )
alert( Object.prototype.toString.call(arr) ==
'[object Array]'
);
//'[object Array]'
|
检测对象的数据类型的三种方法：
|
1
2
3
|
arr.constructor==Array
arr
instanceof
Array
Object.prototype.toString.call(arr) ==
'[object Array]'
|
对象的继承
【什么是继承】
在原有对象的基础上，略作修改，得到一个新的对象 ， 不影响原有对象的功能
【为什么要学继承】继承的作用：代码复用
【如何实现继承】 属性的继承、方法继承
拷贝继承
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
function
CreatePerson(name,sex){
//父类
this
.name = name;
this
.sex = sex;
}
CreatePerson.prototype.showName =
function
(){
alert(
this
.name );
};
var
p1 =
new
CreatePerson(
'小明'
,
'男'
);
//p1.showName();
function
CreateStar(name,sex,job){
//子类
CreatePerson.call(
this
,name,sex);
this
.job = job;
}
//CreateStar.prototype = CreatePerson.prototype;//浅拷贝
extend( CreateStar.prototype , CreatePerson.prototype );
CreateStar.prototype.showJob =
function
(){
};
Let\'s get in touch!,login get more service.我们将艺术与技术相结合，用创意和设计为客户创造商业价值，创造优秀的产品及服务体验！登陆之后可以获得更多的私人定制服务 |
网站建设
品牌设计
APP开发
小程序开发
商城开发
网站优化
UI设计
增值服务
