JavaScript的继承机制详谈

烟雨浮萍

已于 2024-02-20 14:34:50 修改

阅读量858

点赞数 23

分类专栏： web前端文章标签： javascript

于 2024-02-18 13:43:21 首次发布

本文链接：https://blog.csdn.net/weixin_47166787/article/details/136068773

版权

web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

2. 原型prototype & 构造函数constructor

3. instanceof运算符

一. this关键字

1.涵义

JavaScript语言之中，一切皆对象，运行环境也是对象，所以函数都是在某个对象之中运行，this就是函数运行时所在的对象（环境）。

2.实质

js引擎会将函数单独保存在内存中，函数是一个单独的值，其引用地址可以赋值给任意对象的属性，因此它可以在不同的环境执行。为了在函数体内部获得当前的运行环境（context），this关键字被设计出来。

注：

this的指向是不确定的，常用解决方法就是使用中间变量固定this的值。
如果this所在的方法不在对象的第一层，这时this只是指向当前一层的对象，而不会继承更上面的层。

3. this与变量作用域

函数运行时的this关键字和其变量作用域并不是一种概念。this的值取决于函数是如何被调用的，而变量作用域则是由函数的编写方式决定的。

4. 绑定this的方法

1）Function.prototype.call()

func.call(thisValue,arg1,arg2,...)

call的第一个参数就是this所要指向的那个对象，后面的参数则是函数调用时所需的参数。

注：hasOwnProperty(propertyName)方法是用来检测属性是否为对象的自有属性，如果是，返回true，否者false。

2）Function.prototype.apply()

func.apply(thisValue, [arg1, arg2, ...])

apply的第一个参数是this所要指向的那个对象；第二个参数是一个数组，即传入原函数的参数。

注：call()和apply()方法不仅绑定函数执行时所在的对象，还会立即执行函数。

3）Function.prototype.bind()

bind方法用于将函数体内的this绑定至某个对象，然后返回一个新函数。

二. 对象的创建

1. 什么是对象

对象是一个容器，封装了属性（property）和方法（method）

2. 构造函数

构造函数用来生成对象实例，JavaScript语言使用构造函数作为对象的模板。它就是一个普通的函数，但有自己的特征和用法。

构造函数的特点：

函数体内部使用了this关键字，代表了所要生成的对象实例。
生成对象的时候，必须使用new命令。

3. new命令

1）new命令的作用

就是执行构造函数，返回一个实例对象。若忘记使用new，则构造函数会变成普通函数，不会生成一个实例对象。

2）new命令的原理

使用new命令时，实际执行的步骤

创建一个空对象，作为要返回的对象实例。
将这个空对象的原型（属性_proto_），指向构造函数的prototype属性。
将这个空对象赋值给函数内部的this关键字
执行构造函数内部的代码

注：如果构造函数内部有return语句，且return后面跟着一个对象，则new命令会返回return语句指定的对象；否则，总会返回this对象。

new命令简化的内部流程

function _new(/* 构造函数 */ constructor, /* 构造函数参数 */ params) {
  // 将 arguments 对象转为数组
  var args = [].slice.call(arguments);
  // 取出构造函数
  var constructor = args.shift();
  // 创建一个空对象，继承构造函数的 prototype 属性
  var context = Object.create(constructor.prototype);
  // 执行构造函数
  var result = constructor.apply(context, args);
  // 如果返回结果是对象，就直接返回，否则返回 context 对象
  return (typeof result === 'object' && result != null) ? result : context;
}

// 实例
var actor = _new(Person, '张三', 28);