JavaScript面向对象_面向对象容器类方法 javascript-CSDN博客

本文链接：https://blog.csdn.net/Gemming_/article/details/103396163

JavaScript面向对象

1.1两大编程思想：

1、面向过程

面向过程：POP(Process-oriented programming)

面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。

大象放到冰箱：打开冰箱==》放入大象==》关上冰箱

2、面向对象

面向对象：OOP (Object Oriented Programming)

面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。

大象，冰箱：都看成对象功能

面向对象和过程区别:面向过程：小项目;面向对象：多人合作大项目

1.2面向对象三大特性

封装性
继承性
多态性

面向对象和过程优缺点

面向过程：

优点：性能比面向对象高，步骤练习紧密（目标明确）

缺点：不好维护，不易多次使用及扩展

面向对象：

优点：易维护，可复用，可扩展，灵活性高

缺点：性能没有面向过程高（考虑一类、系列问题）

简单程序面向过程，复杂程序用面向对象

ES6中的类和对象

ES5：没有类；ES6：类

类：泛指一类（抽象，思想聚焦不到一起）

对象：类中的具体的某个实例，【属性和方法的集合体】（具体）

例如：人有身高，体重等，但是具体的某个人也有这个属性

属性用来访问，方法用来执行

对象是由属性和方法组成的：

属性：对象有什么【访问】【语法：对象.属性】【arr.length】

方法：对象做什么【执行】【语法：对象.方法()】【arr.push(a)】

属性：事物的特征，在对象中用属性来表示（常用名词）

方法：事物的行为，在对象中用方法来表示（常用动词）

面向对象的思维特点:

1.抽取（抽象）对象共用的属性和方法组织(封装)成一个类(模板)

2.对类进行实例化, 获取类的对象

类class

在ES6中新增加了类的概念，可以使用class关键字声明一个类，之后以这个类来实例化对象。【构造函数实例化对象】

类抽象了对象的公共部分，它泛指某一大类（class）

创建类

语法：class 类名 {属性和方法}【构造函数语法】
注意类名首字母大写
类要抽取公共属性方法，定义一个类

class Star {
};//创建类
var ldh= new Star();//构造函数，new一下：实例化对象

类constructor构造函数

语法：

class Star {
	constructor (uname,age){
		this.uname = uname;
		this.age = age;
	}
}
属性：放到constructor，构造函数里面

注意：类里面的方法不带function，直接写既可

类里面要有属性方法，属性方法要是想放到类里面，我们用constructor构造器

构造函数作用：接收参数，返回实例对象，new的时候主动执行，主要放一些公共的属性

constructor() 方法是类的构造函数(默认方法)，用于传递参数,返回实例对象，通过new命令生成对象实例时，自动调用该方法。

注意：每个类里面一定有构造函数，如果没有显示定义, 类内部会自动给我们创建一个constructor() ，

注意：this代表当前实力化对象，谁new就代表谁

类添加方法

语法：注意方法和方法之间不能加逗号，同时方法不需要添加function 关键字


class Star {
//构造函数：属性
	constructor () {}
//方法：
	sing () {}
	dance () {}
}

总结：类有对象的公共属性和方法，用class创建，class里面包含constructor和方法，我们把公共属性放到constructor里面，把公共方法直接往后写既可*但是注意不要加逗号

方法直接调用，属性需要访问

继承

继承：一个类继承另外一个类的方法 extends（延伸，延长）

语法：
	class Father {}
	class Son extends Father{}
//让Son 继承Father 的属性和方法

super关键字

super：调用父类的方法（普通方法，构造方法）

当子类也想有自己的构造函数，同时也想继承父类的构造函数的话，那么就要用super

当子类没有constructor的时候可以随意用父类的，但是如果子类也含有的话，constructor会返回实例，this的指向不同，不可以再直接使用父类的东西，就要用super

class Son extends Father {
    constructor(name,age,score){
        super(name,age);
        this.score=scpre;
    }
    qian(){
        super.qian();//如果调用父亲的方法，用super.方法（子类方法和父类方法相同的情况下）
        qian();//优先使用自己的方法
    }
}

方法：如果子类和父类有相同的方法，加入子类依旧想用父类的方法，那么我们要用super

如果子类有自己的构造函数和父类同名的方法，此时不可以直接用父类的东西，需要用super调用父类的方法和构造函数

三个注意点

在ES6中类没有变量提升，所以必须先定义类，才能通过类实例化对象.
类里面的共有属性和方法一定要加this使用.【this.属性/方法】
类里面的this指向问题：
- constructor 里面的this指向实例对象,
- 方法里面的this 指向这个方法的调用者

class BUtton {
    constructor(){
        var btn = document.querSelector("input");
        btn.onclick=this.cli;
    }
    cli(){
        conso;e.log('点击了')；
    }
}
var anniu = new Button();

element.insertAdjacentHTML()

将指定的文本解析为HTML或XML，并将结果节点插入到DOM树种的指定位置。不会破坏现有元素。

element.insertAdjacentHTML( position ， text)

position：

”beforebegin“ 元素自身的前面；
”afterbegin“ 插入元素内部的第一个子节点之前；
“beforeend” 插入元素内部的最后一个子节点之后；
“afterend” 元素自身的后面

text是要被解析为HTML或XML并插入到DOM树种的字符串。

构造函数原理

创建对象：

1.字面量

var obj = {
    //属性和方法
    //键值对
    //组成对象的成员
    name:"阿飞"，
    age:22,
    sex:"男",
    fei:function(){....},
}

访问属性的两种方法：1.对象.属性 2. 对象[‘属性’]

遍历对象

for(var key in 对象){
    //注意：里面不能用对象.属性的方法遍历只能用对象[key]
   console.log( 对象.[key])
}

2.构造函数

var  obj = new Object();
console.log(obj insetanceof Object);
//添加属性
obj.uname = '阿飞';
obj.age = 22;...

3.自定义构造函数

function Person(unanme, age){
    //属性
    this.uname = uname;
    this.age = age;
    //方法
    this.say = function(){}
}
var n = new Person("阿飞"，22);