HTML 学习笔记 JavaScript（面向对象）

Posted 2020-08-25 幻影-2000

现在让我们继续跟着大神的脚步前进 学习一下javascript中的面向对象的思想，其实作为一个ios开发者，对面向对象还是比较熟悉的，但是昨晚看了一下Js中的面向对象，妈蛋 一脸萌比啊。还好有大神。让我们跟着大神的思路在捋一下。(在这里更欢迎大家阅读原博 )原博地址：http://www.cnblogs.com/dolphinX/p/4385862.html

理解对象

对象这个词如雷贯耳，同样出名的一句话：XXX语言中一切皆为对象！

对象是什么？什么觉面向对象的编程？

对象（object），台湾译作物件，是面向对象（Object Oriented）中的术语，既表示客观世界问题空间（Namespace）中的某个具体的事物，又表示软件系统解空间中的基本元素。

在软件系统中，对象具有唯一的标识符，对象包括属性（Properties）和方法（Methods），属性就是需要记忆的信息，方法就是对象能够提供的服务。在面向对象（Object Oriented）的软件中，对象（Object）是某一个类（Class）的实例（Instance）。 —— 维基百科

对象是从我们现实生活中抽象出来的一个概念，俗话说物以类聚，人以群分，我们也经常说有一类人，他们专业给隔壁家制造惊喜，也就是我们说的老王

这里面就有两个重要概念

类：无论是物以类聚，还是有一类人，这里说的类并不是实际存在的事物，是一些特征、是一些规则等
老王：这是个实物，是现实存在，和类的关系就是符合类的描述
对应到计算机术语，类就是class，定义了一些特点（属性 property）和行为（方法 method），比如说给隔壁制造惊喜的这类人有几个特征

长相文质彬彬，为人和善
姓王
同时这些人还有技能（行为）

帮隔壁修下水道
亲切问候对方儿子
我们刚才就描述了一个类，用代码表示就是

class LaoWang{
    string name;
    string familyNmae = "wang";
    bool isKind = true;

    LaoWang(string name){
        this.name = name;
    }

    void fixPipe(){
        statement
    }

    void greetSon(){
        statement
    }
}

符合这些特点并且有上述行为能力的，我们称之为老王，从描述我们就可以看出来LaoWang不是指某个人，而是指一类人，符合上述描述的都可能是老王！用计算机术语说就是没个活蹦乱跳的老王都是类LaoWang的实例。用代码描述就是

LaoWang lw1 = new LaoWang("yi");
LaoWang lw2 = new LaoWang("er");
...
LaoWang lw1000000 = new LaoWang("baiwan");

可以看出我们能够根据类LaoWang实例化出成千百万个老王来，老王不是一个人在战斗！

封装

刚才我们说的已经涉及到了对象的一个重要特性——封装

以前我们可能会有这样的描述

王一长相文质彬彬，为人和善，姓王，有技能帮隔壁修下水道、亲切问候对方儿子
王二长相文质彬彬，为人和善，姓王，有技能帮隔壁修下水道、亲切问候对方儿子
王三长相文质彬彬，为人和善，姓王，有技能帮隔壁修下水道、亲切问候对方儿子
王四长相文质彬彬，为人和善，姓王，有技能帮隔壁修下水道、亲切问候对方儿子
...
王百万长相文质彬彬，为人和善，姓王，有技能帮隔壁修下水道、亲切问候对方儿子

有了对象的思想我们可以这样说了，首先定义一类人

有那么一类人

1. 长相文质彬彬，为人和善
2. 姓王

同时这些人还有技能（行为）

1. 帮隔壁修下水道
2. 亲切问候对方儿子

然后是实例化，也就是对号入座

王一是老王
王二是老王
...
王百万是老王

也就是说 我们通过类来描述一套规则，其中包括

1:属性

2:行为

对于这个类实例化出的对象，也就是副歌这个类描述的对象，不用去关心对象细节，我们认为符合类的描述，就会有类规定的属性和方法，至于每个方法具体实现细节不去关注，比如老王怎么给人修水管，我知道他有修水管的技能，然后用的时候让他去修就好了（只要不修我家的）

我们称这种隐藏细节的特征叫做封装

JavaScript 对象

---

因为JavaScript是基于原型（prototype）的，没有类的概念（ES6有了，这个暂且不谈），我们能接触到的都是对象，真正做到了一切皆为对象

所以我们再说对象就有些模糊了，很多同学会搞混类型的对象和对象本身这个概念，我们在接下来的术语中不提对象，我们使用和Java类似的方式，方便理解

function People(name){
    this.name = name;

    this.printName = function(){
        console.log(name);
    };
}

这是一个函数，也是对象，我们称之为类

var p1 = new People(\'Byron\');

p1是People类new出来的对象，我们称之为实例

类和实例的关系用我们码农的专业眼光看起来是这样的

类就是搬砖的模具，实例就是根据模具印出来的砖块，一个模具可以印出（实例化）多个实例，每个实例都符合类的特征，这个例子和我们JavaScript中概念很像

在Java中类不能称之为对象，如同老王是一个概念、规则的集合，但是在JavaScript中，本身没有类的概念，我们需要用对象模拟出类，然后用类去创建对象
我们的例子中模具虽然是“类”，但同时也是个存在的实物，是个对象，我们为了方便理解，称之为类

Object

---

 

我们知道JavaScript有null、undefined、number、boolean、string五种简单类型，null和undefined分别表示没有声明和声明后没有初始化的变量、对象，是两个简单的值，其余三个有对应的包装对象Number、Boolean、String

其它的就是object 类型了，比如常用的Array Date RegExp等，我们常用的Function也是一个对象 虽然

typeof function(){}; // "function"

但是Function实例和其他类型的实例没有什么区别，都是对象，只不过 typeof操作符对其作了处理。

在JavaScript中使用对象很简单，使用new操作符执行Obejct函数就可以构建一个最基本的对象

var obj = new Object();

我们称new调用的函数为构造函数，构造函数和普通函数的区别仅仅在于是否使用了new来调用，它们的返回值也会不同

所谓“构造函数”，就是专门用来生成“对象”的函数。它提供模板，作为对象的基本结构。一个构造函数，可以生成多个对象，这些对象都有相同的结构

我们可以通过.来位对象添加属性和方法

obj.name = \'Byron\';
obj.printName = function(){
    console.log(obj.name);
};

这么写比较麻烦，我们可以使用字面量来创建一个对象，下面的写法和上面等价

var obj = {
    name: \'Byron\',
    printNmae: function(){
        console.log(obj.name);
    }
}

构造对象

我们可以抛开类 使用字面量来构造一个对象

var obj1 = {
    nick: \'Byron\',
    age: 20,
    printName: function(){
        console.log(obj1.nick);
    }
}
var obj2 = {
    nick: \'Casper\',
    age: 25,
    printName: function(){
        console.log(obj2.nick);
    }
}

问题

这样构造有两个明显问题

太麻烦了，每次构建一个对象都是复制一遍代码
如果想个性化，只能通过手工赋值，使用者必需了解对象详细
这两个问题其实也是我们不能抛开类的重要原因，也是类的作用

使用函数做自动化

function createObj(nick, age){
  var obj = {
    nick: nick,
    age: age,
    printName: function(){
            console.log(this.nick);
        }
  };
  return obj;
}

var obj3 = createObj(\'Byron\', 30);
obj3.printName();

我们通过创建一个函数来实现自动创建对象的过程，至于个性化通过参数实现，开发者不必关注细节，只需要传入指定参数即可
问题
这种方法解决了构造过程复杂，需要了解细节的问题，但是构造出来的对象类型都是Object，没有识别度

有型一些

---

要想让我们构造出的函数有型一些 我们需要了解一些额外的知识

function作为构造函数（通过new操作符调用） 的时候会返回一个类型为function的name对象

function 可以接受参数，可以根据参数创建相同类型的不同值对象

function 实例作用域内有一个constructor属性，这个属性就可以指示其构造器

new

new运算符接受一个函数F及其参数 new F(arguments...)。这一过程分为三步：

1.创建类的实例 这步是把一个空的对象的 proto 属性设置为 F.prototype 。
2.初始化实力 函数F被传入参数并调用，关键字this被设定为该实例
3.返回实例

根据这几个特性 我们来改造一下创建对象的方式

function Person(nick, age){
    this.nick = nick;
    this.age = age;
    this.sayName = function(){
            console.log(this.nick);
    }
}
var p1 = new Person();

instanceof

instanceof 是一个操作符 可以判断对象是否为某个类型的实例

p1 instanceof Person; // true
p1 instanceof Object;// true

instanceof 判断的是对象

1 instanceof Number; // false

问题

构造函数在解决了上面所有问题，同时为实例带来了类型，但可以注意到每个实例printName方法实际上作用一样，但是每个实例要重复一遍，大量对象存在的时候是浪费内存

构造函数

任何函数只要使用new表达式就是构造函数

每个函数都自动添加一个名称为prototype属性,这是一个对象

每个对象(实例)都有一个内部属性__proto__(规范中没有指定这个名称，但是浏览器中都是这么实现的)指向其类型的prototype属性，类的实例也是对象，其proto属性指向“类”的prototype

prototype

通过图我们可以看出一些端倪，实例可以通过__proto__访问到其类型的prototype属性，这就意味着类的prototype对象可以作为一个公共容器，供所有实例访问。

抽象重复

---

我们刚才的问题可以通过这个手段解决

所有实例都会通过原型链引用到类型的prototype

prototype相当于特定类型所有实例都可以访问到的一个公共容器

重复的东西移到公共容器里放一份就可以了

看下代码

function Person(nick, age){
    this.nick = nick;
    this.age = age;
}
Person.prototype.sayName = function(){
    console.log(this.nick);
}

var p1 = new Person();
p1.sayName();

这个时候我们对应的关系是这样的

终于有个靠谱的构建对象的方式了

What\'s this?

由于运行期绑定的特性 JavaScript中的this含义非常多，它可以是全局对象，当前对象或任意对象，这完全取决于函数的调用方式

随着函数使用场合的不同 this的值也会放声变化，但是又一个总的原则，就是this指的是 调用函数的那个对象。

作为函数调用

---

在函数被直接调用的时候，this绑定到全局对象 在浏览器中 window就是该全局对象。

console.log(this);//window

function fn1(){
    console.log(this);
}

fn1();//window

内部函数

函数嵌套产生的内部函数的this 不是其父函数 仍然是全局变量

console.log(this);//window
function fn0() {
    function fn() {
        alert(this);//window
    }
    fn();
}
fn0();

setTimeout setInterval

这两个方法执行的时候 this也是全局对象

document.addEventListener("click",function(e) {
    console.log(this);//htmlDocument
    setTimeout(function(){
        console.log(this);//window
    },200);
});

作为构造函数调用

---

所谓构造函数，就是通过这个函数生成一个新对象（object）。这时，this就指这个新对象

new 运算符接受一个函数 F 及其参数：new F(arguments...)。这一过程分为三步：

创建类的实例。这步是把一个空的对象的 proto 属性设置为 F.prototype 。
初始化实例。函数 F 被传入参数并调用，关键字 this 被设定为该实例。
返回实例。

看例子

function Person(name){
    this.name = name;
}
Person.prototype.printName = function(){
    console.log(this.name);
};

var p1 = new Person(\'Byron\');
var p2 = new Person(\'Casper\');
var p3 = new Person(\'Vincent\');

p1.printName();//Byron
p2.printName();//Casper
p3.printName();//Vincent

作为对象方法调用

---

在JavaScript中 函数也是对象，因此函数可以作为一个对象的属性，此时函数被称为该对象的方法，在使用这种方式调用时 this被自然绑定到该对象

var obj1 = {
    name: \'Byron\',
    fn : function(){
        alert(typeof this);//object
    }
};

obj1.fn();

小陷阱

var fn2 = obj1.fn;

fn2();//window

DOM对象绑定事件

---

在事件处理程序中this代表事件源DOM对象（低版本IE有bug，指向了window）

document.addEventListener(\'click\', function(e){
    console.log(this);//HTMLDocument
    var _document = this;
    setTimeout(function(){
        console.log(this);//window
        console.log(_document);//HTMLDocument
    }, 200);
}, false);

Function.prototype.bind

---

 

bind 返回一个新函数 并且使函数内部的this为传入的第一个参数

var obj1 = {
    name: \'Byron\',
    fn : function(){
        console.log(this);//object
    }
};
var fun3 = obj1.fn.bind(obj1);
fun3();//Object { name: "Byron", fn: obj1.fn() }

使用call和apply设置this

---

call apply，调用一个函数，传入函数执行上下文及参数

fn.call(context, param1, param2...)

fn.apply(context, paramArray)

语法很简单，第一个参数就是希望蛇者的this对象，不同之处在于call方法接收参数列表 而apply接收参数数组。

fn2.call(obj1);
fn2.apply(obj1);

_caller

---

在函数A调用函数B的时候，被调用函数B会自动生成一个caller属性 指向调用他的函数对象，如果函数当前未被调用或并非被其他函数调用，则caller为Null

function fn4(){ console.log(fn4.caller); function fn(){ console.log(fn.caller); } fn(); } fn4();

函数的执行环境

---

JavaScript中的函数既可以被当作普通的函数执行 也可以作为对象的方法执行，这是导致this含义如此丰富的主要原因

一个函数被执行时，会创建一个执行环境(ExecutionContext)，函数的所有行为均发生在此执行环境中，构建该执行环境时，JavaScript首先会创建arguments变量，其中包含调用函数时传入的参数

接下来时创建作用域链，然后初始化变量，首先初始化函数的形参表，值为arguments变量中对应的值，如果 arguments变量中没有对应值，则该形参初始化为 undefined。

如果该函数中含有内部函数，则初始化这些内部函数，如果没有，继续初始化该函数内定义的局部变量，需要注意的是此时的这些变量初始化为undefined，其赋值操作在执行环境创建成功后，函数执行时才会执行，这点对于我们理解JavaScript中的变量作用域非常重要，最后为this变量赋值，会根据函数调用方式的不同，赋给this对象，当前对象等。

至此函数的执行环境（ExecutionContext）创建成功，函数开始逐行执行，所需变量均从之前构建好的执行环境（ExecutionContext）中读取

三种变量

实例变量:(this) 类的实例才能访问到的变量

静态变量:(属性)直接类型对象能访问到的变量

私有变量:(局部变量)当前作用域内有效的变量

看个例子:

function ClassA(){
    var a = 1; //私有变量，只有函数内部可以访问
    this.b = 2; //实例变量，只有实例可以访问
}

ClassA.c = 3; // 静态变量，也就是属性，类型访问

console.log(a); // error
console.log(ClassA.b) // undefined
console.log(ClassA.c) //3

var classa = new ClassA();
console.log(classa.a);//undefined
console.log(classa.b);// 2
console.log(classa.c);//undefined

原型连接和继承

---

在一切开始之前回顾一下类 实例 prototype  __proto__的关系

function Person(nick, age){
    this.nick = nick;
    this.age = age;
}
Person.prototype.sayName = function(){
    console.log(this.nick);
}

var p1 = new Person();
p1.sayName();

1.我们通过函数定义了"类":Person,函数自动获得prototype

2.每个类的实例都会有一个内部属性__proto__ 指向类的prototype属性。

有趣的现象

---

我们定义一个数组，调用其valueof()的方法

var numbers = [1,2,3];

alert(numbers.valueOf());//[1,2,3]

很奇怪的是我们在数组的类型Array中并不能找到valueOf的定义，根据之前的理论那么极有可能定义在了Array的prototype中，用于实例共享方法。查看一下

我们发现Array的prototype里面并未包含valueOf等定义，那么valueOf是哪里来的呢？

一个有趣的现象是我们在Object实例的__proto__属性（也就是Object的prototype属性）中找到了找到了这个方法

那么Array的实例为什么同样可以查找到Object的prototype里面定义的方法呢？

查找valueof过程

---

因为任何类型的prototype本质上也是个类Object的实例，所以prototype也和其他实例一样有个__proto__内部属性，指向Object的prototype

我们大概知道为什么了，自己类的prototype找不到的话，还会找prototype的类型的prototype((类似于父类的概念))属性，这样层层向上查找

大概过程是这样的

1>查找当前对象obj 查找obj属性 方法 找到后返回

2>没有找到 通过obj的__proto__属性，找到其类型Array的prototype属性(记为prop)继续查找，找到后返回

3>没有找到，把prop记为obj做递归重复步骤一，通过类方法找到prop的类型Object的prototype进行查找，找到后返回。

这就是传说中的原型链，层层向上查找，最后还没有就返回undefined

用iOS中面向对象的思想来说的话 就是Array继承与Object，当实例化一个Array对象，当这个实例调用函数时，先查找Array中有没有这个方法，有调用，没有在查找其父类Object中的方法(函数) 如果有返回调用 没有 在找Object的父类，最后找不到的话 报错崩溃。

类型

我们之前介绍过instanceof操作符，判断对象是不是某个类型的实例

[1, 2, 3] instanceof Array; //true

可以看到[1,2,3]是类型Array的实例

[1, 2, 3] instanceof Object; //true

这个结果有些非议所思，怎么又是Array的实例，又是Object的实例，这不是乱套了

其实这个现象在日常生活中很常见 比如我们有两种类型

1类人猿
2动物

我们发现黑猩猩即是类人猿这个类的物种（实例），也是动物的实例

是不是悟出其中的门道了，类人猿是动物的一种，也就是说我们的两个类型之间有一种父子关系

这就是传说中的继承，JavaScript正是通过原型链实现继承机制的

继承

---

继承是指一个对象直接使用另外一个对象的属性和方法。

JavaScript并不提供原生的继承机制，我们自己实现的方式很多，介绍一种最为通用的。

通过上面的描述，我们可以看出我们如果实现了以下两点就可以说我们实现了继承

1.得到一个类的属性

2.得到一个类的方法。

我们分开讨论一下，先定义两个类

function Person(name,sex) {
    this.name = name;
    this.sex = sex;
}
Person.prototype.printName = function () {
    console.log(this.name);
}

function Male(gae) {
    this.age = age;
}
Male.prototype.printAge = function() {
    console.log(this.age);
}

属性获取

对象属性的获取是通过构造函数的执行，我们在一个类中执行另外一个类的构造函数，就可以把属性赋值到自己的内部，但是我们需要把环境改变到自己的作用域内，这就要借助我们讲过的函数call了

改造一下 Male

function Male(name,sex,age) {
    Person.call(this,name,sex);
    this.age = age;
}
Male.prototype.printAge = function() {
    console.log(this.age);
}

实例化 看看结果

var m = new Male("Byron","man",26);
console.log(m.sex);//max

那么我们类比一下iOS中的面向对象  Person.call()到底做了什么呢？仔细想一想是不是类似于子类实现自己构造函数的时候 写的一句[super init]呢，调用父类的方法完成继承的属性的初始化，再在自己的构造方法内完成拓展属性的初始化。总的来说，我感觉Person.Call().完成的工作就相当于[super init]。但是在JavaScript中他的具体作用，我作为初学者还是不太清楚，以后，我会专门写一遍博客介绍一下。

方法获取

我们知道类的方法都定义在了prototype里面，所以只要我们把子类的prototype改为父类的prototype的备份就好了。

Male.prototype = Object.create(Person.prototype);

这里我们通过Object.create() clone了一个新的prototype而不是直接把Person.prototype直接赋值，因为引用关系，这样会导致后续修改了子类的prototype也修改了父类的prototype，因为修改的是一个值。

另外 Object.create 是ES5方法，之前版本通过遍历属性也可以实现浅拷贝。

这样做需要注意的一点就是对子类添加方法，必须在修改其prototype之后，如果在之前会被覆盖掉。

Male.prototype.printAge = function(){
    console.log(this.age);
};

Male.prototype = Object.create(Person.prototype);

这样的话，printAge方法在赋值后就没了，因此得这么写

function Male(name, sex, age){
    Person.call(this, name, sex);
    this.age = age;
}

Male.prototype = Object.create(Person.prototype);

Male.prototype.printAge = function(){
    console.log(this.age);
};

这样写貌似没什么问题了，但是有个问题就是我们知道prototype对象有一个属性constructor 指向其类型，因此我们复制的父元素的prototype，这个时候constructor属性指向是不对的，导致我们判断类型出错。

console.log(Male.prototype.constructor);//function Person()

因此我们需要再重新制定一下constructor属性到自己的类型

最终方案

我们可以通过一个函数实现刚才说的内容

function inherit(superType,subType) {
    var _prototype = Object.create(superType.prototype);
    _prototype.constructor = subType;
    subType.prototype = _prototype;
}

使用方式

function inherit(superType,subType) {
    var _prototype = Object.create(superType.prototype);
    _prototype.constructor = subType;
    subType.prototype = _prototype;
}

function Person(name,sex) {
    this.name = name;
    this.sex = sex;
}
Person.prototype.printName = function () {
    console.log(this.name);
}

function Male(name,sex,age) {
    Person.call(this,name,sex);
    this.age = age;
}
inherit(Person,Male);
//Male.prototype = Object.create(Person.prototype);
Male.prototype.printAge = function() {
    console.log(this.age);
}

var m = new Male("Byron","man",26);
console.log(m.sex);//max
m.printName();
console.log(Male.prototype.constructor);//function Male()

这样 我们就在JavaScript中实现了继承。

hasOwnProperty

---

继承之后Male的实例也有了Person的方法，那么怎么判断某个是自己的还是父类的？

hasOwnProperty 是Object.prototype的一个方法，可以判断一个对象是否包含自定义属性而不是原型链上的属性。hasOwnProperty 是Js中唯一一个处理属性但不是查找原型链的函数

m.hasOwnProperty(\'name\'); // true
m.hasOwnProperty(\'printName\'); // false
Male.prototype.hasOwnProperty(\'printAge\'); // true