面向对象 OOP

Posted 2020-09-18 李佳阳

[面向对象编程OOP]

 

1 语言的分类

面向机器 ：汇编语言

面向过程 ：c语言

面向对象 ：c++ Java php等

 

2 面向过程与面向对象

面向过程：专注于如何去解决一个问题的过程，编程特点是一个函数去实现过程操作，没有类与对象的概念

面向对象：专注于有哪一个对象实体去解决这个问题，编程特点是：出现一个个的类，由类去生成对象

【面向对象的三大特征】

继承 封装 多态

 

类与对象的关系

1类 : 一群有相同特征(属性)和行为(方法)的集合

人类 属性：身高 ，年龄。体重， 方法：吃饭 睡觉 敲代码

2对象: 从类中，拿出的具有确定属性值和方法的个体

张三 属性 身高180 方法 说话

3类和对象的关系

类是抽象的，对象是具体的。类是对象的抽象化，对象是类的具体化

通俗来讲，类是一个抽象的概念，表示具有相同属性和行为的集合，但是类仅仅表明这类群体具有向同的属性

但是没有具体的属性值

而对象是对类的属性进行具体赋值后，而得到的一个具体的个体

 

4实用类和对象的步骤

① 创建一个类（构造函数） 类名：必须要每个单词的首字母都大写

Function 类名(属性一){

this.属性=属性一

 

 

this.方法=Function(){}

this 指向谁？即将调用当前构造函数的对象

}

② 通过类，实例化出一个新对象

var obj = new 类名(属性——value)

原构造函数中的this，指向新创建的obj对象

obj.方法(); 调用方法

obj.属性(); 调用属性

实例化对象，会执行创造函数

 

5 两个重要的属性

constructor: 返回当前对象的构造函数 只有对象才有，返回的是构造函数-类

>>> zhangsan.constructor == Person true

>>> 对象的constructor，位于_proto_原型对象上 (后续讲解)

instanceof：判断对象是否是某个类的实例

>>>zhangsan instanceof Person true

>>>preson instanceof Objiect true

>>>zhangsan instanceof Object true

 

 

6广义对象与狭隘对象

狭义对象：只有属性，方法。除此之外没有任何东西

var obj = {}; var obj = new Object();

广义对象： 除了用字面量声明的基本数据类型之外分，万物接对象，换句话说，能够添加属性和方法的变量，就是对象

 

var s = "1" 不是对象

var s = new String("1") 是对象

 

①定义一个（类）构造函数

function Person(name,age,sex){

类的属性

this.name=name;

this.age= age;

this.sex= sex;

类的方法

this.say = function(){

alert("我叫"+this.name+";今年"+this.age+"岁;"+"我是一个"+this.sex+"生")

}

}

从类中，实例化出一个对象，并给对象的属性赋值

var zhangsan = new Person("张三",18,"男");

zhangsan.say();

 

var lisi = new Person("李四",12,"男");

lisi.say();

 

var wanger = new Person("王二",14,"女");

wanger.say();

 

Person();

var arr = [Person,1,2,3]

arr[0]();

person.height = 10;

console.log(zhangsan);

console.log(zhangsan instanceof Person);

console.log(zhangsan instanceof Object);

</script>

[成员属性与成员方法]

1、在构造函数中声明，通过 this属性声明，或者实例化出对象后，通过"对象.属性"追加的，都属于成员属性、或成员方法也叫实力属性与实例方法

成员属性/方法 是属于实例化出的这个对象

通过"对象.属性"调用

 

[静态属性和静态方法]

2、通过类名.属性名 "类名.方法名"声明的变量，称为静态属性、静态方法；也叫类属性，类方法

 

类属性/类方法 是属于类的(属于构造函数)

通过"类名.属性"调用

3、成员属性是属于实例化出的对象的，会出现在新对象的属性上

静态属性是属于构造函数自己的，是不会出现在新对象的属性上

4 JS对象属性的删除

①对象无需手动删除，JS提供了一种主动释放对象内存的方法（及对象无用后，自动删除）

②删除对象的属性，delete 对象名.属性名

5 对象是引用数据类型

也就是说，当new出一个对象是，这个obj变量存储的实际上是对象的地址，在对象赋值时，负的也是地址

function Person(){}

var zhangsan = new Person();//zhangsan对象实际存的是地址，

var lisi = zhangsan // 实际上是吧zhangsan 的地址给了lisi

lisi.name = "李四"//lis通过地址，修改了对象

console.log(zhangsan.name);//张三再通过地址打开对象，实际已经变了

引用数据类型，赋值时，传递的是引用(地址)——快捷方式

基本数据类型，赋值时传递的是数据(值)

6、私有属性与私有方法

在构造函数中，通过var声明的属性。称为私有属性

function Person(){var num = 1;}

私有属性的作用域，尽在当前函数有效，对外不公开，即通过对象/类都无法调用到。

 

 

function Person(name){

this.name = name;成员属性

}

Person.hei = 20;静态属性

 

var zhangsan = new Person("张三");

zhangsan.age= 24 成员属性

 

delete zhangsan.name;删除对象属性

var lisi = zhangsan;

lisi.name = "李四";

 

console.log(zahngsan);

[this详解]

1、谁最终调用函数，this指向。

①this指向的，永远只可能是对象！！！

②this指向谁，永远不取决与this写在哪，而是取决于函数在哪调用

③this指向的对象，我们称之为函数的上下文context 也加函数的调用者

2、※※※※※this指向的规律(与函数调用的方式息息相关);

this指向的情况，取决于函数调用的方式有哪些

① 通过函数()直接调用：this指向window

② 通过对象.函数名()调用的，this指向这个对象

③ 函数作为数组的一个元素通过数组下标调用的，this指向这个数组

④ 函数做为window内置函数的回调函数调用； this指向window

⑤ 函数作为构造函数，用new关键字调用时，this指向新new出的对象

 

 

 

function func1(){

//this[2]=10;

console.log(this)

}

 

 

 

// ① 通过函数()直接调用：this指向window

func1();//this--->window

 

 

 

//② 通过对象.函数名()调用的，this指向这个对象

//狭义对象

var obj = {

name:"obj",

func1:func

};

obj.func1();//this--->obj

//广义对象

document.getElementById("div").onclick = function(){

this.style.backgroundColor = "red"

};//this——>div

 

 

 

// ③ 函数作为数组的一个元素通过数组下标调用的，this指向这个数组

var arr = [func,1,2,3];

arr[0]();//this--->arr数组

 

 

//④ 函数做为window内置函数的回调函数调用； this指向window

setTimeout(func,1000);//this--->window

//setInterval(func,1000);

 

 

 

⑤ 函数作为构造函数，用new关键字调用时，this指向新new出的对象

var obj = new func();//this--->>new出的新obj

 

综合小练习

var obj1={

name:"obj1",

arr:[setTimeout(func,3000),1,2,3]

}

document.getElementById("div").onclick = obj1.arr[0];

/符合规律⑤ 函数最终调用者 setTimeout this--->window

 

 

 

var obj1={

name:"obj1",

arr:[func,1,2,3]

}

document.getElementById("div").onclick = obj1.arr[0]();

符合规律③ 函数最终调用者 数组下标 this--->arr

 

 

 

var obj1={

name:"obj1",

arr:[{name:"arrobj",fun:func},1,2,3]

}

document.getElementById("div").onclick = obj1.arr[0].fun();

//函数最终调用者 {name:"arrobj",fun:func} 符合规律② this--->obj