面向对象简介，构造函数，封装，继承---JavaScript--学习笔记

最新推荐文章于 2024-02-21 10:00:00 发布

混名汪小星

最新推荐文章于 2024-02-21 10:00:00 发布

阅读量174

点赞数

分类专栏：学习笔记 JavaScript

本文链接：https://blog.csdn.net/qq_28835447/article/details/90521728

版权

JavaScript 同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

学习笔记

28 篇文章 0 订阅

订阅专栏

一，面向对象（OOP）的简介*

面向对象的思想
程序 = 数据结构 + 算法

什么是OOP？
程序中用对象来描述现实中的一个具体事务

什么是对象？
封装了一个事务的属性和功能的程序结构

为什么用OOP
和现实中人的想法非常接近，便于大程序的维护

对象用来做什么？
内存中同时存储多个数据和功能的存储空间

什么时候用？
今后开始写程序之前，都要先用对象，描述好要操作东西的属性（静态）和功能（动态），再按照需求使用对象的功能，访问对象的属性

怎么用？
面向对象的三个特征：封装、继承、多态

二，封装

什么叫封装？

将一个具体事物的属性和功能集中定义在一个对象中

对于ES5来说，没有class的概念，并且由于js的函数级作用域（在函数内部的变量在函数外访问不到），所以我们就可以模拟 class的概念，在es5中，类其实就是保存了一个函数的变量，这个函数有自己的属性和方法。将属性和方法组成一个类的过程就是封装。

为什么使用封装？
集中定义之后，反复使用对象，反复使用对象的功能就要用封装，避免全局污染
封装保护了内部数据的完整性；
封装使对象的重构更轻松；
弱化模块间的耦合，提高对象的可重用性；
有助于避免命名空间冲突；

如何使用？

一.自定义对象创建对象
1、使用对象直接量: 已知对象中的属性内容
var obj = {
属性名:属性值,
…:…,
方法名:function(){…this.属性名…},
…
}

this关键字：
1、对象自己的方法，要访问自己的属性，必须用this.属性名
2、引用正在调用函数的对象的关键词，就是.前面的对象
3、方法中不加this的变量，默认仅在作用域链中找，不会去对象中查找

如何访问对象的属性和方法：
obj.属性名 用法和普通的变量完全一样
obj.方法() 用法和普通函数完全一样
注意：方法也是属性，只不过保存的值是一个函数而已

函数执行时会获取this属性的值，此时this就是一个变量，储存着调用该函数的对象的值。
一般都在函数或者对象方法里使用，但是也能用在函数外的全局作用域里。需要注意的是，如果在函数里使用严格模式，全局函数里this的值就是undefined。而在匿名函数里则不会绑定任何对象。

例子：

function stu(name,age){
     	this.name=name;
     	this.age=age;
     	this.display=function(){
     		console.log("I'm "+this.name+" I'm "+this.age)	
     	}	     		     	
     }
     var stu1=new stu('jack',16)
     var stu2=new stu('翠花',18)
     stu1.display()
     stu2.display()

原理图 ：对象自己的方法，要访问自己的属性，仅在对象内查找
在这里插入图片描述

二.使用new创建对象

1.创建空对象

		var obj = new Object();

2.向空对象中添加属性和方法

		obj.属性名=属性值;
		obj.方法名=function(){..this.属性名..}

创建对象时，暂时不知道对象的成员
javascript中对象创建完成，仍可以添加新成员

对象本质上来说，就是关联数组属性名/方法名是key，属性值/函数对象是value

例子

var emp = new Object();
	emp.ename = '马云';
	emp.salary = 500;
	emp.work=function(){
		console.log(this.ename+"的工作是清洁，每个月工资"+this.salary);
	}

三.构造(Constructor)方法创建对象
1、构造方法是专门描述一类对象统一结构的函数
2、反复创建多个相同结构的对象时，都要先定义统一的构造函数，再使用构造函数反复创建对象
解决：复用对象的结构代码

1、定义构造函数
例子

	function  Student(sname,sage){    //---装修图纸，
		this.sname=sname;
		this.sage=sage;
		this.intr=function(){
			console.log(`I'm ${this.sname},I'm ${this.sage}`);
		}
	}

2、使用new调用构造函数，传入具体对象的属性值对照装修图纸，对房子进行装修

new：4件事
1、创建新的空对象
2、让构造函数中的this指向新对象
3、用新对象去调用构造函数
4、将新对象的地址保存在变量中

	var lilei = new Student("Li Lei",12);
	var hmm = new Student("Han Meimei",12);
	console.dir(lilei);
	lilei.intr();
	console.dir(hmm);
	hmm.intr();

在这里插入图片描述

三，继承

js中的继承 — 构造函数的原型

继承：父对象的成员，子对象不用重复创建，也可以直接使用
why：节省内存，又能代码重复
when：只要一类子对象，需要相同的属性或功能，都要讲相同的属性和功能仅在父对象中定义一次即可

什么叫原型对象？
专门记录存储一类对象相同属性和功能的父对象
when：只要一类子对象共有得相同属性值和功能都要定义在原型对象中
how：原型不需要手动创建，每创建一个构造函数，都会自动生成一个原型对象

prototype ：属性使您有能力向对象添加属性和方法。
语法

object.prototype.name=value

例子

      //构造函数
function Student(sname,sage){
		this.sname=sname;
		this.sage=sage;
	}
	//在原型中添加共有的属性和行为
	Student.prototype.intr=function(){
		console.log(`I'm ${this.sname},I'm ${this.sage}`);  //ES6新属性
	}
	Student.prototype.cName="初二3班";

	var lilei = new Student("Li Lei",12);
	var hmm = new Student("Han Meimei",12);
	lilei.intr();
	hmm.intr();
	
	lilei.cName="初二2班";     //只是改了lilei这个对象中的班级信息
	
	console.log(lilei.cName);//2班
	console.log(hmm.cName);//3班

删除对象中的属性 ---- 非常危险！！！！！！不要轻易做这个动作

    delete lilei.sage;
	console.log(lilei.sage)

删除原型中的属性 ---- 非常危险！！！！！！不要轻易做这个动作

      delete Student.prototype.cName;
	
	 console.log(hmm.cName);

自有属性：直接保存在对象本地的属性
共有属性：保存在原型对象中，被所有子对象共享的属性

		获取：   对象.属性
		赋值：  自有-->对象.属性=值
				共有-->构造函数.prototype.属性名=值
		鉴别自有和共有属性：
				自有   var bool = obj.hasOwnProerty("属性名")  判断 属性名 是否为obj的自有属性
				共有  不是自有，且obj.属性名 != undefind

	console.log(hmm.hasOwnProperty("sname"));//true表示sname自有 属性
	console.log(hmm.hasOwnProperty("cName") && hmm.cName!= undefind);// false 表示cName为共有属性

原理图

在这里插入图片描述
__proto__属性都是由一个对象指向一个对象，即指向它们的原型对象（也可以理解为父对象），那么这个属性的作用是什么呢？它的作用就是当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的__proto__属性所指向的那个对象（可以理解为父对象）里找，如果父对象也不存在这个属性，则继续往父对象的__proto__属性所指向的那个对象（可以理解为爷爷对象）里找，如果还没找到，则继续往上找…直到原型链顶端null（可以理解为原始人。。。），此时若还没找到，则返回undefined（可以理解为，再往上就已经不是“人”的范畴了，找不到了，到此结束），由以上这种通过__proto__属性来连接对象直到null的一条链即为我们所谓的原型链。

prototype属性，它是函数所独有的，它是从一个函数指向一个对象。它的含义是函数的原型对象，也就是这个函数（其实所有函数都可以作为构造函数）所创建的实例的原型对象。它的作用就是包含可以由特定类型的所有实例共享的属性和方法，也就是让该函数所实例化的对象们都可以找到公用的属性和方法。任何函数在创建的时候，其实会默认同时创建该函数的prototype对象。

constructor属性也是对象才拥有的，它是从一个对象指向一个函数，含义就是指向该对象的构造函数，每个对象都有构造函数（本身拥有或继承而来。
在这里插入图片描述
总结：
我们需要牢记两点：
①__proto__和constructor属性是对象所独有的；② prototype属性是函数所独有的，因为函数也是一种对象，所以函数也拥有__proto__和constructor属性。
__proto__属性的作用就是当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的__proto__属性所指向的那个对象（父对象）里找，一直找，直到__proto__属性的终点null，然后返回undefined，通过__proto__属性将对象连接起来的这条链路即我们所谓的原型链。
prototype属性的作用就是让该函数所实例化的对象们都可以找到公用的属性和方法。