面向对象的三大特性
- 封装、继承、多态
- 封装
- 作用：方便代码的维护，提高代码的复用性，更虐泉的访问数据的方式
- 注意：js 的封装多了一层意思，就是使用对象来封装变量和函数
var type = '喜剧';
var actors = ['赵丽颖','彭于晏','李荣浩','邓超'];
var showTime = '2017-2-17 2017-3-17';
var director = '韩寒';
var play = function(){
console.log('播放。。。。');
}
var film = {
type = "喜剧"；
actors:['赵丽颖','彭于晏','李荣浩','邓超'];
showTime:'2017-2-17 2017-3-17';
director:'韩寒';
play:function(){
console.log('播放....');
}
};
console.log(film);
type = '动作片';
- 继承
- 现实生活中的继承：继承遗产，一个人获得另一个人所拥有的财富或者是资源的方式
- 编程语言中的继承：一个类（对象）获得另外一个类（对象）的属性和方法的一种方式。
- 面向对象的语言特征：类（C++）C（没有类），js 中没有类（class），支持面向对象的语言
- 多态
多种形态 - 表现：
对于相同的操作，不同的对象表现出不同的行为
隐藏不同 - 实现：
js 天生具备多态的特性（弱类型的语言）
var obj1 = {name:'zhangsan',age:20};
var obj2 = {};
for(var k in obj1){
//点语法在这里获取不到obj2.k = obj1.k;
obj2[k] = obj1[k];
}
console.log(obj2);
内置构造函数的方式创建对象
- 内置构造函数
Object Function(String Number Boolean) Array Date...
创建对象
//创建不同类型的对象
var obj = new Object();
var date = new Date();
var str = 'demo'; //string
var strObj = new String('demo'); //object
var strObj2 = String('demo'); //string
var strObj3 = new Object('demo'); //object
console.log(str == strObj);
console.log(str == strObj2);
console.log(str === strObj);
console.log(str.length);
- 如果需要创建多个相似的对象，那么代码中冗余度太高（重复的代码太多）
//创建对象
var book1 = new Object();
//设置属性
book1.name = "花田半亩";
book1.author = "田维";
book1.price = "40.01";
//设置方法
book1.logDes = function(){
console.log('书名：' + this.name);
}
book1.logDes();
//创建多个对象
var book2 = new Object();
book2.name = "三国演义";
book2.author = "罗贯中";
book2.price = "34.01";
book2.logDes = function (){
console.log("书名：" + this.name);
}
console.log(book1);
console.log(book2);
简单工厂函数创建对象
//提供函数（工厂函数）
function createBook(){
//创建空对象
var o = new Object();
//设置属性和方法
o.name = '默认的名称';
o.author = '默认的作者';
o.logDes = function(){
console.log('作者是：' + this.author);
};
//返回新创建的对象
return o;
}
//创建对象
var book1 = createBook();
var book2 = createBook();
cosnole.log(book1);
console.log(book2);
- 封装
把固定的部分提取写成函数的函数体，把变化的部分提取出来，作为函数传递
function createBook(name,author){
var o = new Object();
o.name = name;
o.author = author;
o.logDes = function(){
console.log('作者是：' + this.author);
};
return o;
}
var book1 = createBook("小学数学","教育部");
var book2 = createBook("高等数学","燕子");
console.log(book1);
console.log(book2);
- 如果创建多个不同类型的对象，那么我们无法分辨
function createPerson(name,age){
var o = new Object();
o.name = name;
o.age = age;
return o;
}
function createDog(name,age)
{
var o = new Object();
o.name = name;
o.age = age;
return o;
}
//创建具体的对象
var obj1 = createPerson("张三",88);
var obj2 = createDog("物理韬韬",13);
console.log(obj1);
console.log(obj2);
//typeof 判断类型
console.log(typeof obj1);
console.log(typeof obj2);
console.log(obj1.constructor); //Object
console.log(obj2.constructor); //Object
自定义构造函数方式创建对象
function createPerson(name,age){
//原料：name + age + 空对象
var o = new Object();
//对原料进行加工
o.name = name;
o.age = age;
//产品出厂
return o;
}
var p1 = createPerson("张三",20);
var p2 = createPerson("张三",20);
var p3 = createPerson("张三",20);
- 自定义构造函数创建对象
- 提供一个构造函数
- 通过 this 指针来设置属性和方法
- 通过 new 操作符创建对象
//提供一个构造函数
//构造函数简单介绍
//作用：对对象进行一些初始化的设置
//和普通函数的区别
//首字母大写
//调用方式不一样，配合 new 使用
function Person(name,age){
//默认 创建对象
// var o = new Object();
//默认会赋值给 this
//this = o;
//通过 this 指针来设置属性和方法
this.name = name;
this.age = age;
this.showName = function(){
console.log(this.name);
};
this.showAge = function(){
console.log(this.age);
};
//默认返回
//return this;
}
//使用 new 操作符来创建对象
var p1 = new Person('张三'，20);
var p2 = new Person('张老汉'，200);
console.log(p1);
console.log(p2);
- 自定义构造函数方式创建对象内部的实现细节
- 我们在使用 new 关键字调用构造函数的时候，内部默认会创建一个空的对象
- 默认会把这个空的对象赋值给 this
- 通过 this 来设置新对象的属性和方法
- 在构造函数的最后，默认会把新创建的对象返回
- 自定义构造函数和工厂函数对比
- 函数的名称不一样，构造函数首字母大写
- 自定义构造函数创建方式内部会自动的创建空对象并赋值给 this
- 默认会自动返回新创建的对象
- 返回值
- 没有显示的 return , 默认会把新创建的对象返回
- 先的执行了 return 语句，就得看具体的情况
返回的是值类型，那么直接忽略该返回，把新创建的对象返回；
返回的是引用类型的数据，会覆盖调新创建的对象，直接返回引用数据类型的值。
function Dog(name){
this.name = name;
//return 'demo'; 忽略
//return function(){} 覆盖
}
var dog = new Dog('阿黄');
console.log(dog);
构造函数注意事项1
- 函数传值&对象类型&构造器属性
function Student(number,className,log){
this.number = number;
this.className = className;
this.log = log;
}
var stu1 = new Student("201701","九阴真经修炼1班"，function(){
console.log('学号：' + this.number);
})
var stu2 = new Student("201702","九阴真经修炼2班",function(){
console.log("班级名称：" + this.className);
})
stu1.log();
stu2.log();
- 对象的类型（判断）
- 关键字 instanceOf 用来判断当前对象是否是某个类型的实例（检查某个对象是否是使用指定构造函数创建的）
- 语法：对象 instanceOf 构造函数（类型）
function Person(){};
function Dog(){};
var p1 =new Person();
var dog1 = new Dog();
console.log(p1 instanceof Person);
console.log(p1 instanceof Dog);
console.log(dog1 instanceof Person);
console.log(dog1 instanceof Dog);
- 构造器属性（获取）
- 在所有的对象中，都拥有一个构造器属性：constructor
function Person(){};
function Dog(){};
var p1 = new Person();
var dog1 = new Dog();
console.log(p1.constructor);
console.log(dog1.constructor);
构造函数注意事项2
- 函数调用& this
- 函数调用
new:创建对象，并在最后返回该对象
构造函数：用于初始化对象
以普通函数的方式来调用构造函数，那么内部的 this 指向的是 window
function Person(name){
if(this instanceof Person){
this.name = name;
}else{
return new Person(name);
}
}
var p1 = new Person('哔哩哔哩');
//构造函数本身是一个函数，在调用时可以直接调用
<del>var p2 = Person('哗啦哗啦');</del>//不要这么写
console.log(p2); //undefined
构造函数方式创建对象存在的问题
var showName = function(){
console.log("姓名：");
}
function Person(name,age){
this.name = name;
this.age = age;
this.showName = showName;
}
//创建对象
var p1 = new Person("张小花",18);
var p2 = new Person("张全蛋",99);
p1.showName();
p2.showName();
//每创建一个对象，内部都会声明一个showName函数
console.log(p1.showName == p2.showName); //false
缺点
- 把函数写在了外部，破坏封装性
- 增加了一个全局变量
