关于javascript:JS原生之继承闭包原型原型链

1次阅读

共计 7389 个字符，预计需要花费 19 分钟才能阅读完成。

最近在从新看 js 根底，索性就将继承、闭包、原型链这三个原生 js 中比拟重要的点写篇文章总结一下。本人明确了解是一回事，写了文章让他人看明确是另外一回事，通过讲述，本人也能提高。

JS 的作者 Brendan Eich 在设计这门编程语言时，只是为了让这门语言作为浏览器与网页互动的工具。他感觉这门语言只须要能实现一些简略操作就够了，比方判断用户是否填写了表单。
基于繁难语言的设计初衷，作者感觉 JS 不须要有相似 java 等面向对象语言所领有的“继承”机制。然而思考到 JS 中所有皆对象（所有的数据类型都能够用对象来示意），必须有一种机制，把所有的对象分割起来，实现相似的“继承”机制。
不同于大部分面向对象语言，ES6 之前并没有引入类（class）的概念，JS 并非通过类而是通过构造函数来创立实例，应用 prototype 原型模型来实现“继承”。

在 JavaScript 里，构造函数通常是用来实现实例的，JavaScript 没有类的概念，然而有非凡的构造函数。构造函数实质上是个一般函数，充当类的角色，次要用来创立实例，并初始化实例，即为实例成员变量赋初始值。

构造函数和一般函数的区别在于，构造函数应该遵循以下几点标准：

在命名上，构造函数首字母须要大写；
调用形式不同，一般函数是间接调用，而构造函数须要应用 new 关键字来进行调用；
在构造函数外部，this 指向的是新创建的实例；
构造函数中没有显示的 return 表达式，个别状况下，会隐式地返回 this，也就是新创建的对象，如果想要应用显式的返回值，则显式的返回值必须是对象，否则仍然返回实例。

构造函数是用来创立实例的

// 步骤 1：新建构造函数
function Person(name) {
    this.name = name;
    this.sayName = function() {console.log(this.name);
    }
}

// 步骤 2：创立实例
var person = new Person('yang');

此时，如下图所示，针对步骤 1，当构造函数被创立时，会在内存空间新建一个对象，构造函数内有一个属性 prototype 会指向这个对象的存储空间，这个对象称为构造函数的原型对象。

针对步骤 2，如下图所示，person 是通过 Person 构造函数创立的实例，在 person 外部将蕴含一个指针（外部属性），指向构造函数的原型对象，这个指针称为 [[prototype]]。
目前，大部分浏览器都反对 __proto__ 这个属性来拜访构造函数的原型对象，就像这里，person.__proto__ 指向 Person.prototype 的对象存储空间。

由下面示例图晓得，实例 person 如果拜访原型对象，须要应用 __proto__ 这个属性。
事实上，__proto__ 是一个拜访器属性（由一个 getter 函数和一个 setter 函数形成），但作为拜访 [[prototype]] 的属性，它是一个不被举荐的属性，JavaScript 标准中规定，这个属性仅在浏览器环境下能力应用。
[[prototype]] 是外部的而且是暗藏的，当须要拜访外部 [[prototype]] 时，能够应用以下古代办法：

// 返回对象 `obj` 的 `[[prototype]]`。Object.getPrototypeOf(obj);

// 将对象 `obj` 的 `[[prototype]]` 设置为 `proto`。Object.setPrototypeOf(obj, proto) 

// 利用给定的 `proto` 作为 `[[prototype]]` 和属性描述符（可选）来创立一个空对象。Object.create(proto[, descriptors])

在默认状况下，所有的原型对象都会主动取得一个 constructor 的属性，这个属性蕴含一个指向 prototype 所在函数的指针，即 constructor 属性会指向构造函数自身。
此外，Person.prototype 指向的地位是一个对象，也蕴含有外部 [[prototype]] 指针，这个指针指向的是 Object.prototype，是一个对象。这个关系示意，Person.prototype 是由 Object 作为构造函数创立的。
须要留神的是，原型是能够被改写的。然而 JavaScript 中对其做了规定，只能够被改写成对象，如果改写成其余值（空值 null 也不行），会主动被疏忽，会让原型链下一级来替换这个被改写的原型。

属性专用化：原型能够存储一些默认属性和办法，并且在各个不同的实例中能够共享应用；

继承：在子类构造函数中借用父类构造函数，再通过原型来继承父类的原型属性和办法，模仿继承的成果；

节俭存储空间：联合第 1 点，专用的属性和办法多了，对应须要的存储空间也缩小了。

// 第一步 新建构造函数
function Person(name) {
    this.name = name;
    this.age = 18;
    this.sayName = function() {console.log(this.name);
    }
}
// 第二步 创立实例 1
var person1 = new Person('1 号');

// 第三步 创立实例 2
var person2 = new Person('2 号');

// 后果均为 true
person1.__proto__ === Person.prototype;
person2.__proto__ === Person.prototype; 

// 1 号 2 号
console.log(person1.name, person2.name);

// 18 18
console.log(person1.age, person2.age);

JavaScript 中，万物皆对象（所有的数据类型都能够用对象来示意），对象与对象之间存在关系，并不是孤立存在的，对象之间的继承关系，在 JavaScript 中实例对象通过外部属性 [[prototype]] 指向父类对象的原型空间，直到指向浏览器实现的外部对象 Object 为止，Object 的外部属性 [[prototype]] 为 null，这样就造成了一个原型指向的链条，这个链条称为原型链。
当拜访对象的属性时，会先在对象本身属性中查找，如果有则间接返回应用，如果没有则会顺着原型链指向持续寻找（一直查找外部属性 [[prototype]]），直到寻找浏览器内置对象的原型，如果仍然没有找到，则返回 undefined。

须要留神的是，原型链中拜访器属性和数据属性在读写上是有区别的（点击理解拜访器属性和数据属性）。如果在原型链上某一级设置了拜访器属性（假如为 age）, 则读取 age 时，间接按拜访器属性设置的值返回；写入时也是以拜访器属性为最优先级。在数据属性的读写上，读取时，会依照原型链属性查找进行查找；写入时，间接写入以后对象，若原型链中有雷同属性，会被笼罩。
能够联合以下代码来对原型链进行剖析：

// 第一步 新建构造函数
function Person(name) {
    this.name = name;
    this.age = 18;
    this.sayName = function() {console.log(this.name);
    }
}
// 第二步 创立实例
var person = new Person('person');
复制代码

依据以上代码，能够失去上面的图示：

第一步中，新建 Person 的构造函数，此时原型空间被创立；第二步中，通过 new 构造函数生成实例 person，person 的 [[prototype]] 会指向原型空间。

很多人容易漠视的是浏览器对于上面的解决，这里 Person.prototype.__proto__ 指向内置对象，因为 Person.prototype 是个对象，默认是由 Object 函数作为类创立的，而 Object.prototype 为内置对象。

而 Person.__proto__ 指向内置匿名函数 anonymous，因为 Person 是个函数对象，默认由 Function 作为类创立，而 Function.prototype 为内置匿名函数 anonymous。

这里还须要留神一个点，Function.prototype 和 Function.__proto__ 同时指向内置匿名函数 anonymous，这样原型链的起点就是 null，而不必放心原型链查找会陷入死循环中。

概念：通过某种形式，能够让某个对象拜访到其余对象中的属性、办法，这种形式称之为继承。
背景：有些对象会有办法，而这些办法都是函数（函数也是对象），如果把这些办法都放在构造函数中申明，则会产生内存节约
留神：js 的继承都是建设在：办法在原型上创立、属性在实例上创立的前提下

1、借助 call

function Parents(age, live) {
    this.name = '借助 call 形式实现继承'
    this.age = age
    this.live = live
}
function Child() {Parents.call(this, ...arguments)
}
let child = new Child(18, true)

console.log('child:', child)

毛病：这样写的时候子类尽管可能拿到父类的属性值，然而问题是父类原型对象中一旦存在办法那么子类无奈继承。

2、借助原型链

function Parents1(age) {
    this.name = "借助原型链实现继承"
    this.age = age
}
function Child1() {this.type = 'Child1'}
Child1.prototype = new Parents1()


let child1 = new Child1()

console.log("child1:", child1.name)

毛病：扭转实例的属性会影响到父类的属性，因为共用一个原型对象（援用类型）

3、将前两中组合（组合式继承）

function Parents2(age) {
    this.name = '借助组合式实现继承'
    this.age = age
    this.arr = [1, 2, 3]
}
function Child2() {
    this.type = 'Child2'
    Parents2.call(this, ...arguments)
}
Child2.prototype = new Parents2()

let child2 = new Child2(12)
let anthorChild2 = new Child2(13)
child2.arr.push(4)
console.log('child2:', child2)
console.log('anthorChild2:', anthorChild2)

毛病：这种继承的问题那就是 Parent2 的构造函数会多执行了一次（Child2.prototype = new Parent2();）

4、组合继承的优化

function Parents3(age) {
    this.age = age
    this.name = '组合继承的优化 1'
}
function Child3() {Parents.call(this, ...arguments)
    this.type = 'Child3'
}
// 这里让将父类原型对象间接给到子类，父类构造函数只执行一次，// 而且父类属性和办法均能拜访
Child2.prototype = Parents3.prototype

毛病：子类实例的构造函数是 Parent3，显然这是不对的，应该是 Child3。

5、寄生组合式继承

function Parents4(age) {
    this.age = age
    this.name = '寄生组合式继承'
}
function Child4() {Parents.apply(this, [...arguments])
    this.type = 'Child4'
}
Child4.prototype = Object.create(Parents4.prototype)
Child4.prototype.constructor = Child4

这是最举荐的一种形式，靠近完满的继承，它的名字也叫做寄生组合继承。

6、ES6 的 extends

它用的就是寄生组合式继承，然而加了一个 Object.setPrototypeOf(subClass, superClass)
是用来继承父类的静态方法。这也是原来的继承形式忽略掉的中央。

扩大：面向对象继承的问题，无奈决定继承哪些属性，所有属性都得继承。

一方面父类是无奈形容所有子类的细节状况的，为了不同的子类个性去减少不同的父类，代码势必会大量反复。
另一方面一旦子类有所变动，父类也要进行相应的更新，代码的耦合性太高，维护性不好。
用组合，这也是当今编程语法倒退的趋势，比方 golang 齐全采纳的是面向组合的设计形式。
面向组合就是先设计一系列整机，而后将这些整机进行拼装，来造成不同的实例或者类。

例如：不同的车有不同的性能

function drive(){console.log("动员");
}

function music() {console.log("音乐")
}

function addOil() {console.log("加油")
}
// compose 是一个组合各种办法的办法
// 一般汽车
let car = compose(drive, music, addOil);
// 新能源
let newEnergyCar = compose(drive, music);

闭包是指有权拜访另外一个函数作用域中的变量的函数（红宝书）
闭包是指那些可能拜访自在变量的函数。（MDN）其中自在变量，指在函数中应用的，但既不是函数参数 arguments 也不是函数的局部变量的变量，其实就是另外一个函数作用域中的变量。）

说起闭包，就必须要说说作用域，ES5 种只存在两种作用域：1、函数作用域。2、全局作用域
当拜访一个变量时，解释器会首先在以后作用域查找标示符，如果没有找到，就去父作用域找，直到找到该变量的标示符或者不在父作用域中，这就是作用域链，每一个子函数都会拷贝下级的作用域，造成一个作用域的链条。

let a = 1;

function f1() {
    var a = 2

    function f2() {
        var a = 3;
        console.log(a); //3
    }
}

在这段代码中，f1 的作用域指向有全局作用域(window) 和它自身，而 f2 的作用域指向全局作用域(window)、f1 和它自身。而且作用域是从最底层向上找，直到找到全局作用域 window 为止，如果全局还没有的话就会报错。闭包产生的实质就是，以后环境中存在指向父级作用域的援用。

function f2() {
    var a = 2

    function f3() {console.log(a); //2
    }
    return f3;
}
var x = f2();
x();

这里 x 会拿到父级作用域中的变量，输入 2。因为在以后环境中，含有对 f3 的援用，f3 恰好援用了 window、f3 和 f3 的作用域。因而 f3 能够拜访到 f2 的作用域的变量。那是不是只有返回函数才算是产生了闭包呢？回到闭包的实质，只须要让父级作用域的援用存在即可。

var f4;

function f5() {
    var a = 2
    f4 = function () {console.log(a);
    }
}
f5();
f4();

让 f5 执行，给 f4 赋值后，等于说当初 f4 领有了 window、f5 和 f4 自身这几个作用域的拜访权，还是自底向上查找，最近是在 f5 中找到了 a, 因而输入 2。在这里是里面的变量 f4 存在着父级作用域的援用，因而产生了闭包，模式变了，实质没有扭转。

返回一个函数。
作为函数参数传递。
在定时器、事件监听、Ajax 申请、跨窗口通信、Web Workers 或者任何异步中，只有应用了回调函数，实际上就是在应用闭包。
IIFE(立刻执行函数表达式) 创立闭包, 保留了全局作用域 window 和以后函数的作用域。

var b = 1;

function foo() {
    var b = 2;

    function baz() {console.log(b);
    }
    bar(baz);
}

function bar(fn) {
    // 这就是闭包
    fn();}
// 输入 2，而不是 1
foo();
// 以下的闭包保留的仅仅是 window 和以后作用域。// 定时器
setTimeout(function timeHandler() {console.log('111');
}, 100)

// 事件监听
// document.body.click(function () {//     console.log('DOM Listener');
// })

// 立刻执行函数
var c = 2;
(function IIFE() {
    // 输入 2
    console.log(c);
})();

for (var i = 1; i <= 5; i++) {setTimeout(function timer() {console.log(i)
    }, 0)
}  // 6 6 6 6 6 6
// 为什么会全副输入 6？如何改良，让它输入 1，2，3，4，5？

解析：

因为 setTimeout 为宏工作，因为 JS 中单线程 eventLoop 机制，在主线程同步工作执行完后才去执行宏工作。
因而循环完结后 setTimeout 中的回调才顺次执行，但输入 i 的时候以后作用域没有。
往上一级再找，发现了 i，此时循环曾经完结，i 变成了 6，因而会全副输入 6。

// 1、利用 IIFE(立刻执行函数表达式)当每次 for 循环时，把此时的 i 变量传递到定时器中
for (var i = 0; i < 5; i++) {(function (j) {setTimeout(() => {console.log(j)
        }, 1000);
    })(i)
}
// 2、给定时器传入第三个参数, 作为 timer 函数的第一个函数参数
for (var i = 0; i < 5; i++) {setTimeout(function (j) {console.log(j)
    }, 1000, i);
}
// 3、应用 ES6 中的 let
// let 使 JS 产生革命性的变动，让 JS 有函数作用域变为了块级作用域，// 用 let 后作用域链不复存在。代码的作用域以块级为单位，for (let i = 1; i <= 5; i++) {setTimeout(function timer() {console.log(i)
    }, 2000)
}

以上局部内容起源与本人温习时的网络查找，也次要用于集体学习，相当于记事本的存在，暂不列举链接文章。如果有作者看到，能够分割我将原文链接贴出。

正文完

javascript

发表至： javascript

2021-03-24

0

小蝌蚪传记200行代码实现前端无痕埋点

关于javascript:LeetCode-题解｜6-Z-字形变换

关于javascript:JavaScript复杂对象数组比较收集不相等的对象

Blog-技术选型

关于jenkins:python3-调用Jenkins模块实例

关于javascript:JS原生之继承闭包原型原型链

概览

原型

背景

构造函数

原型的规定

原型的作用

原型链

继承

实现继承的形式

闭包

作用域

场景

经典的一道题

阐明

站内搜索