面向对象 原型和原型链 this关键字
1. 面向对象
1.1 面向过程和面向对象
面向过程 POP:站在执行者的角度,关注程序执行的每一个细节
面向对象 OOP:站在支配者的角度,关注的是能实现功能的对象,调用对象的能力就能达到目标
1.2 类和对象
类 class:类是描述,对一类事物共有的特征和行为进行的描述
对象 object:对象是实体(实例),是具备类描述的所有特征和行为的实体
属性:外在特征
方法:内在行为
1.3 构造函数【重点】
构造函数可以直接理解为: 构造对象的函数
//创建构造函数 == 类
function Person(name, age, gender, height){
//属性的描述
this.name = name;
this.age = age;
this.gender = gender;
this.height = height;
//方法的描述
this.run=function(){
console.log( this.name + '以每小时80公里的速度跑步');
}
this.eat=function(){
console.log( this.name + '每天吃三吨');
}
}
//通过new实例化对象
let p1 = new Person('小源', 18, '男', 170);
let p2 = new Person('小红', 17, '女', 185);
两个面试题:
-
构造函数有什么特征(与普通函数的区别)
构造函数首字母大写
将属性和方法都挂到this上
不需要return语句,也能通过new返回实例对象
-
new关键字的执行过程
在堆内存中创建一个空的内存空间
将构造函数中的this指向到这个空间
执行构造函数,将所有的属性和方法挂到这个空间
将创建好的新空间返回给变量
2. 原型和原型链【重点】
2.1 方法过载
方法过载是构造函数创建对象的一个问题,每一个对象创建时都会独立创建方法,造成大量内存资源的浪费
2.2 原型【重点】
2.2.1 原型的概念
原型就是prototype属性,所有函数上都有这个属性
prototype属性是一个对象,可以添加属性和方法,添加上去的方法叫原型方法(实例方法)
prototype属性可以被实例化出来的对象所【引用】
proto :隐式原型,出现在对象身上,用于指向类的prototype属性
prototype:显式原型,出现在构造函数上,用于实现类的方法
constructor:出现在prototype上,用于声明构造函数
2.2.2 原型的写法
//写法一
User.prototype.login=function(){
console.log(this.username+'登陆成功');
}
//写法二,目前不推荐
User.prototype={
login:function(){
...
},
logout:function(){
...
}
}
2.2.3 原型的作用
原型主要用于开发各种插件,或者扩展功能
2.3 原型链【重点】
原型链是查找方法的链条,先在对象自身找方法,再就去原型(类)上找,还可以去父类的原型上找,直到Object的原型。
3. this关键字
3.1 全局上的this
指向window对象
3.2 函数中的this
谁调用函数,函数中的this就指向谁
3.3 对象方法中的this
指向对象自身
3.4 事件处理函数中的this
指向事件源
3.5 构造函数中的this
指向实例化出来的对象
3.6 定时器中的this
指向window
3.7 箭头函数中的this
箭头函数不会修改this的指向
3.8 修改this指向【重点】
所有的函数都拥有3个方法 call() apply() bind() ,用于修改函数中this的指向
.call() 修改函数中this的指向,并执行1次,可以传参数列表
.apply() 修改this指向,并执行1次,参数要用数组
.bind() 修改this指向,不会主动执行, 可以赋值给变量,后面再调用执行
推荐阅读: