知识点
- 面向对象的三大特性
- 封装
- 继承
- 多态
- 创建对象的几种方式
- 字面量形式
- 使用内置构造函数
- 封装简单的工厂函数
- 自定义构造函数
- 构造函数
- 什么是构造函数?
- 对象的创建过程
- 构造函数的返回值
- 对象是无序的键值对儿的集合
- 如果像使用正常的函数一样使用构造函数
- 获取对象类型
面向对象的三大特性
封装
对象是将数据与功能组合到一起, 即封装
- 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);
网友评论