JavaScript面向对象的程序设计

1.编程思想 ( 了解 )

1. 面向过程

   执行者: 做事情亲力亲为,一步一步操作,对细节把握比较清晰 (适用于小项目)
   

2. 面向对象

   指挥者: 做事情找中介(第三方库),项目中通常把功能封装到对象中,只需要调用对象的属性和方法即可 (适用于中大型项目)
   

2.类与实例对象 ( 了解 )

1. 类

   //概念: 把同类型的实物的共有特征和功能进行抽象描述
   

2. 实例对象

   //概念: 由类构造出来的对象就是实例对象  (万物皆对象)
   

3.ES5类的创建( 了解 )

#es5类: 构造函数 + 原型

//构造函数
function Person (name, age){
  //var obj = {} //实例对象
  this.name = name;
  this.age = age;
  this.show = function (){}
  //return obj;
}

//原型
Person.prototype.方法 = function (){}
Person.prototype.方法 = function (){}

//实例对象
var p1 = new Person('小小', 20)

4.原型和原型链

1. 原型

   //1. 每个构造函数都有一个原型对象==prototype 显示原型
   console.log(Person.prototype);
   
   //2. 在原型上添加的属性和方法共享
   console.log(p1.showTime === p2.showTime);
   
   //3. 实例对象属性__proto__, 指向构造函数原型
   console.log(p1.__proto__ === Person.prototype);
   
   //4. 原型属性constructor,指向构造函数本身
   console.log(Person.prototype.constructor === Person);
   

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qMLD68M0-1681660701573)(C:\Users\admin\Desktop\Snipaste_2022-07-24_09-44-46.png)]

2. 原型链

   //1.原型对象也是一个实例对象,它是由Object类new出来的
   //2.原型对象属性__proto__,指向了Object的原型
   

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-17cfW660-1681660701575)(C:\Users\admin\Desktop\Snipaste_2022-07-24_10-06-01.png)]

实例对象调用属性和方法: 基于原型链查找该属性和方法

p1.show() —>p1查找 —> Person.prototype查找 —> Object.prototype查找 —>报错

小结:

1.原型作用 :

  添加共享属性和方法

  减小内存消耗

5. this指向

#1. 7种this指向
  //1. 全局中 ===> window
  //2. 一般函数 ==> window
  //3. 对象方法中 ==> 当前对象
  //4. 计时器中 ==> window
  //5. 事件中 ==> 事件源
  //6. 构造函数 ==> 实例对象
  //7. 箭头函数 ==> 上一层作用域this

#2. 改变this指向
//1.call
	立即执行函数,参数是列表
    方法.call(对象, 参数1, 参数2)

//2.apply
	立即执行函数,参数是数组
    方法.apply(对象, [参数1, 参数2])

//3.bind
    不会立即执行.返回一个函数, 参数是列表
	var 方法名 = 方法.bind(对象, 参数1,参数2)