知识点
- 面向对象的三大特性
- 封装
- 继承
- 多态
- 创建对象的几种方式
- 字面量形式
- 使用内置构造函数
- 封装简单的工厂函数
- 自定义构造函数
- 构造函数
- 什么是构造函数?
- 对象的创建过程
- 构造函数的返回值
- 对象是无序的键值对儿的集合
- 如果像使用正常的函数一样使用构造函数
- 获取对象类型
面向对象的三大特性
封装
对象是将数据与功能组合到一起, 即封装
- js 对象就是 键值对的集合
- 键值如果是数据( 基本数据, 复合数据, 空数据 ), 就称为属性
- 如果键值是函数, 那么就称为方法
- 对象就是将属性与方法封装起来
- 方法是将过程封装起来
//封装
var name = "张学友";
var age = 18;
function sayHello(){
console.log("hello world");
}
var obj = {
name : "刘德华",
age : 50,
sayHello : function () {
//.....
}
}
var itcast = {
getEle:{
},
}
继承
所谓继承就是自己没有, 别人有,拿过来为自己所用, 并成为自己的东西
让某个类型的对象获得另一个类型的对象的属性的方法
- js 继承基于对象
- 在JavaScript中,继承就是当前对象可以使用其他对象的方法和属性。
- js继承实现举例:混入(mix)
function mix ( o1, o2 ) {
for ( var k in o2 ) {
o1[ k ] = o2[ k ];
}
}
<script>
//继承
//javaScript当中的继承是指
//一个对象没有一些方法和属性,但是另外一个对象有
//把另外一个对象的属性和方法,拿过来使用,就是继承
var obj = {
};
var obj1 = {
name : "张学友",
sayHello: function () {
console.log("你好,我是张学友");
}
}
// obj.sayHello();
//混入式继承(mix-in) for in
for(var k in obj1){
//k可以获取到对象的每一个属性
//obj1[k]可以获取到对象的每一个属性的值
//这里使用k给对象新增属性的时候,不可以使用点语法
obj[k] = obj1[k];
}
obj.sayHello();
</script>
多态
- 把不同的子类对象都当作父类来看,可以屏蔽不同子类对象之间的差异,写出通用的代码,做出通用的编程,以适应需求的不断变化。
- 多态是在强类型语言中比较常用,JavaScript中没有相应的体现
- 使用父类的引用(指针)指向子类的对象 就叫做多态
- 使用多态来隐藏不同
动物 animal = new 子类(); // 子类:麻雀、狗、猫、猪、狐狸...
动物 animal = new 狗();
animal.叫();
创建对象的方式
- 字面量形式
只能创建一次对象,复用性较差,如果要创建多个对象,代码冗余度太高
var obj = {
name:"演员",
singer:"薛段子手",
type:"流行"
};
var obj1 ={
name:"吻别",
singer:"张学友",
type:"流行"
}
- 使用内置构造函数
//使用内置构造函数
var obj = new Object();
obj.name = "一千个伤心的牛油";
obj.singer = "张学友";
obj.sing = function () {
console.log("一千个伤心的牛油");
}
var obj2 = new Object();
obj2.name = "一千个伤心的牧流";
obj2.singer = "张学友";
obj2.sing = function () {
console.log("一千个伤心的牧流");
}
- 封装简单的工厂函数
本质还是内置构造函数,已经不推荐使用了
function createSong(SingerName,SingName){
var obj = new Object();
obj.name = SingerName;
obj.singer = SingName;
obj.sing = function () {
console.log("一千个伤心的牛油");
}
return obj;
}
var obj = createSong("一千个伤心的牛油","张学友");
自定义构造函数
- 什么是构造函数?
- 构造函数其实也是函数,但是通常用来初始化对象,并且和new关键字同时出现
- new 是用来创建对象的,构造函数是用来初始化对象的(给对象新增成员)
- 构造函数名,首字母要大写!以示区分
<script type="text/javascript">
//自定义构造函数
function Person(){
//默认隐含的操作,把刚才用new新创建出来的对象赋值给this
this.name = "美女";
this.age = 45;
this.sayPaPa = function () {
console.log("啪啪");
}
// return 123;
return [1,2];
}
var p = new Person();
console.log(p);
p.sayPaPa();
</script>
- 对象的创建过程
function Person(name, age){
this.name = name;
this.age = age;
}
var p = new Person();
以上面这个p对象创建为例:
首先使用new关键字创建对象,类似于使用{},这个时候创建出来的对象是一个"没有任何成员"的对象。这里需要注意两点:
1, 使用new关键字创建的对象,对象的类型就是创建这个对象使用的构造函数的函数名
2, 使用{}创建对象,对象的类型一定是Object,相当于使用了new Object()使用构造函数为其初始化成员
1, 在构造函数调用开始的时候,有一个赋值操作,也就是让this = 刚创建出来的对象
2, 在构造函数中,this就代表刚创建出来的对象在构造函数中,利用对象的动态特性,为对象添加成员
构造函数的执行过程
- 使用new关键字创建对象
- 调用构造函数,把新创建出来的对象赋值给构造函数内的this
- 在构造函数内使用this为新创建出来的对象新增成员
- 默认返回新创建的这个对象 (普通的函数,如果不写返回语句,会返回undefined)
- 构造函数的返回值
- 如果不写返回值,默认返回的是新创建出来的对象 (一般都不会去写这个return语句)
- 如果我们自己写return语句 return的是空值(return;),或者是基本类型的值或者null,都会默认返回新创建出来的对象
- 如果返回的是object类型的值,将不会返回刚才新创建的对象,取而代之的是return后面的值
- 对象是无序的键值对儿的集合
function Animal(name, type, barkWay) {
this.name = name;
this.type = type;
this.bark = barkWay;
}
- 如果像使用正常的函数一样使用构造函数
- 构造函数中的this将不再指向新创建出来的对象(因为根本就没有创建对象)
- 构造函数中的this这个时候指向的就是window全局对象
- 当使用this给对象添加成员的时候,全部都添加到了window上
Animal("","",function () {
console.log("我是函数");
}); //这是一个错误的演示
window.bark();
- 获取对象类型
-
typeof 对象实例
,获取的是object
var dog = new Animal("大黄","BYD",function () {
console.log("汪汪汪");
});
console.log(dog);
var cat = new Animal("小花","BSM",function () {
console.log("喵喵喵");
});
console.log(typeof cat);//object
- js中提供了两个方法来调用其他对象的方法:
call、apply
- 获取具体类型的方式
var typeStr = Object.prototype.toString.call(想获取类型的对象)
typeStr = typeStr.slice(8, -1);