面向对象
面向对象的概念
过程式代码的高度封装,提高代码开发效率和可维护性
面向对象不是面向过程的替代,而是面向过程的封装
面向对象的特征
封装性
继承性
多态性
创建对象的四种方法
字面量创建
new Object()
工厂函数
构造函数
字面量创建
var phone = {
brand: 'vivo',
color: 'black',
memory: '128',
play: function () {
console.log('喜欢玩');
}
}
new Object()
var phone = new Object();
phone.brand = 'vivo';
phone.color = 'black';
phone.memory = '128';
phone.play = function () {
console.log('喜欢玩');
}
工厂函数
function phone(brand, color, memory, play) {
var phone = new Object();
phone.brand = brand
phone.color = color;
phone.memory = memory;
phone.play = play;
return phone;
}
var phone1 = phone('vivo', 'black', '128', function () { console.log('喜欢玩') })
构造函数
function Phone(brand, color, memory, play) {
this.brand = brand;
this.color = color;
this.memory = memory;
this.play = play;
}
var phone2 = new Phone('vivo', 'black', '128', function () { console.log('喜欢玩') });
constructor
任何对象都有constructor属性,实例化对象的constructor属性指向构造函数
DOM
console.log(document.getElementsByTagName('div')[0].constructor);
//ƒ HTMLDivElement() { [native code] }
BOM
console.log(history.constructor);
//ƒ History() { [native code] }
自定义
var obj = {};
console.log(obj.constructor);
//ƒ Object() { [native code] }
内置对象
console.log(new Date().constructor);
//ƒ Date() { [native code] }
数组
var arr = [1, 2, 3];
console.log(arr.constructor);
// ƒ Array() { [native code] }
函数
var fun = function () { };
console.log(fun.constructor);
//ƒ Function() { [native code] }
constructor判断数据类型
var num = 1;
console.log(num.constructor == Number);//true
instanceof关键字
实例化对象
function Car(name, color, run) {
this.name = name;
this.color = color;
this.run = run;
}
var car = new Car('baoma', 'black', function () { console.log('会飞') });
console.log(car instanceof Object);//true
DOM
console.log(document.getElementsByTagName('div')[0] instanceof Object);
//true
BOM
console.log(window instanceof Object);
//true
自定义
var obj = {};
console.log(obj instanceof Object);
//true
内置对象
console.log(new Date() instanceof Object);
//true
数组
var arr = [1, 2, 3];
console.log(arr instanceof Object);
//true
函数
var fun = function () { };
console.log(fun instanceof Object);
//true
原型
原型的作用
节省内存空间 实现数据共享
构造函数 实例化对象 原型 三者之间的关系
1.任何函数都有prototype属性,他本身就是对象
2.构造函数也是函数,也有prototype属性,我们称之为原型
3.构造函数原型上的属性和方法,可以被实例化对象继承
4.任何对象都有constructor属性,实例化对象的constructor属性指向构造函数
5.原型也是对象,也有constructor属性,原型对象constructor属性指向构造函数
6.任何对象都有__proto__属性,他是一个指针,实例化对象的__proto__属性指向构造函数的原型。
// 1.
var fun = function () { };
console.dir(fun);
console.log(fun.prototype);
// 2.
function Car(name, color, run) {
this.name = name;
this.color = color;
this.run = run;
}
console.log(Car.prototype);
// {constructor: ƒ}
// constructor: ƒ ()
// [[Prototype]]: Object
// 3
Car.prototype.size = 1000;
Car.prototype.play = function () {
console.log('可以听课');
}
var car1 = new Car('benchi', 'pink', function () { console.log('fly') });
var car2 = new Car('baoma', 'pink', function () { console.log('fly') });
console.log(car1.size);//1000
// 4
console.log(car1.constructor);
// 输出 构造函数
// Car(name, color, run) {
// this.name = name;
// this.color = color;
// this.run = run;
// }
// 5
console.log(Car.prototype.constructor);
// 输出 构造函数
// Car(name, color, run) {
// this.name = name;
// this.color = color;
// this.run = run;
// }
// 6
console.log(car1.__proto__);
//构造函数的原型
// {size: 1000, play: ƒ, constructor: ƒ}
构造函数中this的指向
实例化对象调用,this指向对象
原型对象调用,this指向原型
改变this指向
call()
可以进行函数的调用
可以改变this的指向,没有参数,this指向window
可以改变this的指向,有一个参数,this指向当前参数
可以改变this的指向,有多个参数,this指向第一个参数,剩余的是参数列表
apply()
可以进行函数的调用
可以改变this的指向,没有参数,this指向window
可以改变this的指向,有一个参数,this指向当前参数
可以改变this的指向,有多个参数,this指向第一个参数,剩余的是数组
bind()
不能进行函数的调用
可以改变this的指向,没有参数,this指向window
可以改变this的指向,有一个参数,this指向当前参数