构造函数和原型

于 2022-03-28 22:56:47 发布
阅读量183 收藏 1
点赞数
分类专栏： 前端JavaScript 文章标签： javascript html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HTML_Z/article/details/123808961
版权

构造函数和原型

目标

  • 能够使用构造函数创建对象
  • 能够说出原型的作用
  • 能够说出访问对象成员的规则
  • 能够使用 ES6 新增的一些方法

目录

  • 构造函数和原型
  • 继承
  • ES5 中新增方法

1. 构造函数和原型

1.1 概述

在典型的 OOP 的语言中（如 Java），都存在类的概念，类就是对象的模板，对象就是类的实例，但在 ES6 之前，JS 中并没用引入类的概念。

ES6，全称 ECMAScript 6.0，2015.06 发版。但是目前浏览器的 JavaScript 是 ES6 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

在 ES6 之前，对象不是基于类创建的，而是用一种称为构建函数的特殊函数来定义对象和它们的特征。

创建对象可以通过以下三种方式：

  1. 对象字面量

  2. new Object()

  3. 自定义构造函数

      <script>
    // 1. 利用 new Object() 创建对象
    var obj1 = new Object();

    // 2. 利用 对象字面量创建对象
    var obj2 = {};

    // 3. 利用构造函数创建函数
    function Star(uname, age) {
      this.uname = uname;
      this.age = age;
      this.sing = function () {
        console.log("我会唱歌");
      };
    }
    var ldh = new Star("刘德华", 18);
    var zxy = new Star("张学友", 20);
    console.log(ldh);
    console.log(zxy);
    ldh.sing();
    zxy.sing();
  </script>
1.2 构造函数

构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

在 JS 中，使用构造函数时要注意以下两点：

  1. 构造函数用于创建某一类对象，其首字母要大写
  2. 构造函数要和 new 一起使用才有意义
new 在执行时会做四件事情：
  1. 在内存中创建一个新的空对象
  2. 让 this 指向这个新的对象
  3. 执行构造函数里面的代码，给这个新对象添加属性和方法
  4. 返回这个新对象（所以构造函数里面不需要 return）

JavaScript 的构造函数中可以添加一些成员，可以在构造函数本身上添加，也可以在构造函数内部的 this 上添加。通过这两种方式添加的成员，就分别称为静态成员和实例成员。

  • 静态成员：在构造函数本身上添加的成员称为静态成员，只能有构造函数本身来访问

  • 实例成员：在构造函数内部创建的对象成员称为实例成员，只能由实例化的对象来访问

      <script>
    function Star(uname, age) {
      this.uname = uname;
      this.age = age;
      this.sing = function () {
        console.log("我会唱歌");
      };
    }
    var ldh = new Star("刘德华", 18);
    // 1. 实例化成员就是构造函数内部通过this添加的成员 uname age sing 就是实例成员
    // 实例成员只能通过实例化的对象来访问。
    console.log(ldh.uname);
    ldh.sing();
    // console.log(Star.uname); // 不可以通过构造函数来访问实例成员
    // 2. 静态成员 在构造函数本身上添加的成员 sex 就是静态成员
    Star.sex = "男";
    // 静态成员只能通过构造函数来访问
    console.log(Star.sex);
    // console.log(ldh.sex); // undefined 不能通过对象来访问
  </script>
1.3 构造函数的问题

构造函数方法很好用，但是存在浪费内存的问题。

  <script>
    function Star(uname, age) {
      this.uname = uname;
      this.age = age;
      this.sing = function () {
        console.log("我会唱歌");
      };
    }
    var ldh = new Star("刘德华", 18);
    var zxy = new Star("张学友", 19);
    console.log(ldh.sing === zxy.sing); // false
  </script>

我们希望所有对象使用同一个函数，这样就比较节省内存，那么我们要怎样做呢？

1.4 构造函数原型 prototype

构造函数通过原型分配的函数是所有对象所共享的

  • JavaScrtipt 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象，注意这个 prototype 就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有。

  • 我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法。

      <script>
    function Star(uname, age) {
      this.uname = uname;
      this.age = age;
      // this.sing = function () {
      //   console.log("我会唱歌");
      // };
    }
    Star.prototype.sing = function () {
      console.log("我会唱歌");
    };
    var ldh = new Star("刘德华", 18);
    var zxy = new Star("张学友", 19);
    // console.log(ldh.sing === zxy.sing); // false
    console.log(ldh.sing === zxy.sing); // 此时 false 变成了 true
    console.dir(Star); // 可以清楚的看到里面包含的prototype对象
    ldh.sing();
    zxy.sing();
    // 一般情况下，我们的公共属性定义到构造函数里面；公共的方法我们放到原型对象身上
  </script>

问答？

  • 原型是什么？
    • 一个对象，我们也称为 prototype 为原型对象
  • 原型的作用是什么？
    • 共享方法
1.5 对象原型 _ _ proto _ _

对象都会有一个属性 __proto__指向构造函数的 prototype 原型对象，之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法，就是因为对象有 __proto__原型的存在。

  • __proto__对象原型和原型对象prototype是等价的

  • __proto__对象原型的意思就在于对象的查找机制提供了一个方向，或者说一条路线，但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象prototype

      <script>
    function Star(uname, age) {
      this.uname = uname;
      this.age = age;
      // this.sing = function () {
      //   console.log("我会唱歌");
      // };
    }
    Star.prototype.sing = function () {
      console.log("我会唱歌");
    };
    var ldh = new Star("刘德华", 18);
    var zxy = new Star("张学友", 19);
    ldh.sing();
    console.log(ldh); // 在我们对象身上系统自己添加了一个 _proto__ 指向我们构造函数的原型对象 prototype
    console.log(ldh.__proto__ === Star.prototype); // true
    // 方法的查找规则 首先先看 ldh 对象身上是否有 sing 方法，如果有就执行这个对象上的 sing
    // 如果没有 sing 这个方法，因为有 __proto__ 的存在，就去构造函数原型对象 prototype 身上去查找 sing 这个方法
  </script>
1.6 constructor 构造函数

对象原型（__proto__）和构造函数（prototype）原型对象里面都有一个 constructor 属性，constructor 我们称为构造函数，因为它指回构造函数本身。

  <script>
    function Star(uname, age) {
      this.uname = uname;
      this.age = age;
    }
    // Star.prototype.sing = function () {
    //   console.log("我会唱歌");
    // };
    // Star.prototype.movie = function () {
    //   console.log("我会演电影");
    // };
    // 很多情况下，我们需要手动的利用 constructor 这个属性指回 原来的构造函数
    Star.prototype = {
      constructor: Star,
      sing: function () {
        console.log("我会唱歌");
      },
      movie: function () {
        console.log("我会演电影");
      },
    };
    var ldh = new Star("刘德华", 18);
    var zxy = new Star("张学友", 19);
    // console.log(Star.prototype); // 有 constructor 属性
    // console.log(ldh.__proto__); // 也有 constructor 属性
    console.log(Star.prototype.constructor);
    console.log(ldh.__proto__.constructor);
  </script>
1.7 构造函数、实例、原型对象三者之间的关系

  • Star 构造函数通过Star.prototype指向 Star 原型对象prototype

  • Star 原型对象prototype通过Star.prototype.constructor返回指向 Star 构造函数

  • Star 构造函数 指向 ldh 对象实例 再通过 ldh.__proto__指向 Star 原型对象prototype

在这里插入图片描述

1.8 原型链

在这里插入图片描述

  <script>
    function Star(uname, age) {
      this.uname = uname;
      this.age = age;
    }
    Star.prototype.sing = function () {
      console.log("我会唱歌");
    };
    var ldh = new Star("刘德华", 18);
    // 1. 只要是对象就有 __proto__ 原型，指向原型对象
    console.log(Star.prototype);
    console.log(Star.prototype.__proto__ === Object.prototype); // true
    // 2. 我们 Star 原型对象里面的 __proto__ 原型指向的是 Object.prototype
    console.log(Object.prototype.__proto__); // null
    // 3. 我们 Object.prototype 原型对象里面的 __proto__ 原型  指向为null
  </script>
1.9 JavaScript 的成员查找机制（规则）
  1. 当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性
  2. 如歌没有就查找它的原型（也就是__proto__指向的prototype原型对象）
  3. 如果还没有就查找原型对象的原型（Object 的原型对象）
  4. 依次类推一直找到 Object 为止（null）
  5. __proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条线路
1.10 原型对象 this 指向
  <script>
    function Star(uname, age) {
      this.uname = uname;
      this.age = age;
    }
    var that;
    Star.prototype.sing = function () {
      console.log("我会唱歌");
      that = this;
    };
    var ldh = new Star("刘德华", 18);
    // 1. 在构造函数中，里面 this 指向的是对象实例 ldh
    ldh.sing();
    console.log(that === ldh); // true
    // 2. 原型对象函数里面的 this 指向的是 实例对象 ldh
  </script>
1.11 扩展内置对象

可以通过原型对象，对原来的内置对象进行扩展自定义的方法。比如给数组增加自定义求偶数和的功能。

  • 注意：数组和字符串内置对象不能给原型对象覆盖操作Array.prototype = {}，只能是Array.prototype.xxx = function () {}的方式。

      <script>
    // 原型对象的应用 扩展内置对象方法
    // console.log(Array.prototype);
    Array.prototype.sum = function () {
      var sum = 0;
      for (var i = 0; i < this.length; i++) {
        sum += this[i];
      }
      return sum;
    };
    var arr = [1, 2, 3];
    console.log(arr.sum()); // 6
    console.log(Array.prototype);
    var arr1 = new Array(11, 22, 33);
    console.log(arr1.sum()); // 66
  </script>

2. 继承

ES6 之前并没有给我们提供 extends 继承，我们可以通过构造函数 + 原型对象模拟实现继承，被称为组合继承。

2.1 call()

调用这个函数，并且修改函数运行时的 this 指向

fun.call(thisArg, arg1, arg2, ...)
  • thisArg：当前调用函数 this 的指向对象
  • arg1, arg2, ...传递的其他参数
  <script>
    // call 方法
    function fn(a, b) {
      console.log("我会唱歌");
      console.log(a + b); // 3
    }
    var o = {
      name: "andy",
    };
    // fn();
    // 1. call() 可以调用函数
    // fn.call();
    // 2. call() 可以改变这个函数的 this 指向 此时这个函数的 this 就指向了o这个对象
    fn.call(o, 1, 2);
  </script>
2.2 借用构造函数继承父类型属性

  • 核心原理：通过call()把父类型的 this 指向子类型的 this，这样就可以实现子类型继承父类型的属性。

      <script>
    // 借用父构造函数继承属性
    // 1. 父构造函数
    function Father(uname, age) {
      // this 指向父构造函数的对象实例
      this.uname = uname;
      this.age = age;
    }
    // 2. 子构造函数
    function Son(uname, age, score) {
      // this 指向子构造函数的对象实例
      Father.call(this, uname, age);
      this.score = score;
    }
    var son = new Son("刘德华", 18, 100);
    console.log(son);
  </script>
2.3 借用原型对象继承父类型方法
  <script>
    // 借用父构造函数继承属性
    // 1. 父构造函数
    function Father(uname, age) {
      // this 指向父构造函数的对象实例
      this.uname = uname;
      this.age = age;
    }
    Father.prototype.money = function () {
      console.log(1000);
    };
    // 2. 子构造函数
    function Son(uname, age, score) {
      // this 指向子构造函数的对象实例
      Father.call(this, uname, age);
      this.score = score;
    }
    // Son.prototype = Father.prototype; 这样直接赋值会有问题，如果修改了子原型对象，父原型对象也会跟在一起变化
    Son.prototype = new father();
    // 如果利用对象的形式改变了原型对象，别忘记利用 constructor 指回原来的构造函数
    // 这个是子构造函数专门的方法
    Son.prototype.exam = function () {
      console.log("孩子要考试");
    };
    var son = new Son("刘德华", 18, 100);
    console.log(son);
    console.log(Father.prototype);
    console.log(Son.prototype.constructor);
  </script>

3. ES5 中的新增方法

3.1 ES5 新增方法概述

ES5 中我们新增了一些方法，可以跟很方便的操作数组或者字符串，这些方法主要包括：

  • 数组方法
  • 字符串方法
  • 对象方法
3.2 数组方法

迭代（遍历）方法：forEach() 、map()、filter()、some()、every()

forEach()

array.forEach(function (currentValue, index, arr) {});

  • currentValue数组当前项的值

  • index数组当前项的索引

  • arr数组对象本身

      <script>
    var arr = [1, 2, 3, 4];
    var sum = 0;
    arr.forEach(function (value, index, array) {
      console.log("每个数组元素" + value);
      console.log("每个数组的索引号" + index);
      console.log("数组本身" + array);
      sum += value;
    });
    console.log(sum); // 10
  </script>

filter()

array.filter(function (currentValue, index, arr) {});

  • filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，主要用于筛选数组

  • 注意它直接返回一个新数组

  • currentValue数组当前项的值

  • index数组当前项的索引

  • arr数组对象本身

      <script>
    // filter 筛选数组
    var arr = [12, 22, 35, 47];
    var newArr = arr.filter(function (value, index) {
      // return value > 22; // [35, 47]
      return value % 2 === 0; // [12, 22]
    });
    console.log(newArr);
  </script>

some()

array.some(function (currentValue, index, arr) {});

  • some()方法用于检测数组中的元素是否满足指定条件、通俗点就是查找数组中是否有满足条件的元素

  • 注意：它的返回值是布尔值，如果查找到这个元素，就返回 true，如果查找不到就返回 false

  • 如果找到第一个满足条件的元素，则终止循环，不再继续查找

  • currentValue数组当前项的值

  • index数组当前项的索引

  • arr数组对象本身

      <script>
    // some 查找数组中是否满足条件的元素
    var arr = [12, 22, 35, 47];
    var flag = arr.some(function (value) {
      return value >= 22;
    });
    console.log(flag); // true
    var arr1 = ["red", "pink", "blue"];
    var flag1 = arr1.some(function (value) {
      return value === "pink";
    });
    console.log(flag1); // true
    // 1. filter 也是查找满足条件的元素 返回的是一个数组 而且是把所有满足条件的元素返回回来
    // 2. some 也是查找满足条件的元素是否存在 返回的是一个布尔值 如果查找到第一个满足条件的元素就终止循环
  </script>
3.3 字符串方法

trim()方法会从一个字符串的两端删除空白字符。

str.trim()

trim()方法并不影响原字符串本身，它返回的是一个新的字符串。

  <body>
    <input type="text" />
    <button>点击</button>
    <div></div>
    <script>
      // trim 方法去除字符串两侧空格
      var str = "  an  dy  ";
      console.log(str);
      var str1 = str.trim();
      console.log(str1);

      var input = document.querySelector("input");
      var btn = document.querySelector("button");
      var div = document.querySelector("div");
      btn.onclick = function () {
        var str = input.value.trim();
        if (str === "") {
          alert("请输入内容");
        } else {
          console.log(str);
          console.log(str.length);
          div.innerHTML = str;
        }
      };
    </script>
  </body>
3.4 对象方法

  • Object.keys()用于获取对象自身所有的属性

    Object.keys(obj)
    • 效果类似for...in
    • 返回一个有属性名组成的数组
      <script>
    var obj = {
      id: 1,
      pname: "小米",
      price: 1999,
      num: 2000,
    };
    var arr = Object.keys(obj);
    console.log(arr); // ['id', 'pname', 'price', 'num']
    arr.forEach(function (value) {
      console.log(value);
    });
  </script>

  • Object.defineProperty()定义对象中新属性或修改原有的属性。

    Object.defineProperty(obj, prop, descriptor)
    • obj：必须。目标对象
    • prop：必须。需定义或修改的属性的名字
    • descriptor：必须。目标属性所拥有的特性
    • Object.defineProperty()第三个参数descriptor说明：以对象形式{}书写
      • value：设置属性的值，默认为 undefined
      • writable：值是否可以重写。true | false ，默认为 false
      • enumerable：目标属性是否可以被枚举。true | false ，默认为 false
      • configurable：目标属性是否可以被删除或是否可以再次修改特性 true | false ，默认为 false
      <script>
    var obj = {
      id: 1,
      pname: "小米",
      price: 1999,
    };
    // 1. 以前的对象添加和修改属性的方式
    // obj.num = 1000;
    // obj.price = 99;
    // console.log(obj);

    // 2. Object.defineProperty() 定义新属性或修改原有的属性
    Object.defineProperty(obj, "num", {
      value: 1000,
      enumerable: true,
    });
    Object.defineProperty(obj, "price", {
      value: 99,
    });
    Object.defineProperty(obj, "id", {
      // 如果值为 false 不允许修改这个属性值 默认值也是 false
      writable: false,
    });
    obj.id = 2; // 这个id是不允许被修改的
    console.log(obj);
    Object.defineProperty(obj, "adderss", {
      value: "中国山东蓝翔技校XXX单元",
      // 如果值为 false 不允许修改这个属性值 默认值也是 false
      writable: false,
      // enumerable 如果值为false 则不允许遍历，默认的值为 false
      enumerable: false,
      // configurable 如果为false 则不允许被删除 不允许在修改第三个参数里面的特性 默认为false
      configurable: false,
    });
    console.log(obj);
    console.log(Object.keys(obj));
    delete obj.address;
    console.log(obj);
    delete obj.pname;
    console.log(obj);
  </script>
BloggerM
关注
专栏目录
构造函数和原型对象
Mr_115的博客
11-15 803
构造函数和原型对象
JavaScript高级之构造函数和原型
zep
09-01 193
1.1 概述 在典型的 OOP 的语言中（如 Java），都存在类的概念，类就是对象的模板，对象就是类的实例，但在 ES6之前， JS 中并没用引入类的概念。 ES6， 全称 ECMAScript 6.0 ，2015.06 发版。但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。 在 ES6之前 ，对象不是基于类创建的，而是用一种称为构建函数的特殊函数来定义对象和它们的特征。 创建对象可以通过以下三种方式： 对象字面量 n
前端基础进阶（九）：详解面向对象、构造函数、原型与原型链
Fuohua的博客
04-28 730
. 如果要我总结一下学习前端以来我遇到了哪些瓶颈，那么面向对象一定是第一个毫不犹豫想到的。尽管我现在对于面向对象有了一些的了解，但是当初的那种似懂非懂的痛苦，依然历历在目。 为了帮助大家能够更加直观的学习和了解面向对象，我会用尽量简单易懂的描述来展示面向对象的相关知识。并且也准备了一些实用的例子帮助大家更加快速的掌握面向对象的真谛。 jQuery的面向对象实现
深入理解javascript构造函数和原型对象
10-25
在深入理解JavaScript的过程中，构造函数和原型对象是两个核心概念。JavaScript是一种基于对象（Object-based）和原型（Prototype-based）的语言，其对象模型与传统的基于类（Class-based）语言有所不同。理解构造...
javascript 混合的构造函数和原型方式，动态原型方式
10-29
在JavaScript中，最常用的两种对象类定义方式是混合的构造函数和原型方式、动态原型方式。这两种方式虽然在实现细节上有所区别，但目的相同：都是为了创建对象并为这些对象定义属性和方法。 首先，我们来探讨混合的...
JS原型与构造函数
weixin_33800463的博客
05-27 156
面向对象（OOP）: 1. 什么是: 程序中都是先用对象来定义数据和功能，再按照逻辑的需要，访问对象中的数据和功能。 2. 为什么: 和现实中人的想法非常接近。 3. 什么是对象: 内存中同时存储多个数据和功能的存储空间 描述现实中一个具体事物的属性和功能的程序结构 事物的属性，会成为对象中的属性 ...
构造函数及原型
weixin_45773503的博客
07-25 1062
1. 构造函数和原型 1.1 概述 es6之前没有类的概念，浏览器对es6的支持不完全 1.2 构造函数 构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员赋初始值，他总与new一起使用，我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。 new在执行的时候回执行四件事 在内存中创建一个空的对象 让this指向这个新的对象 执行构造函数里面的代码，给这个新的对象添加属性和方法 返回这个新对象（所以构造函数里面不需要return） 实例成员（构造函数内部用 this.属性）
JS构造函数与原型
热门推荐
交换一个思想，能得到俩思想
01-01 1万+
JavaScript中定义"类"的时候可以通过构造函数和原型的方式来实现，它们之间有何区别和利弊呢? 首先来看一个通过构造函数实现类定义的例子： function Car(color,model,drivers){ this.color=color; this.model=model; this.drivers=drivers; this.blar = function(){
原型与构造函数
qq_36959274的博客
08-08 139
1、对象具有属性__proto__，可称为隐式原型，一个对象的隐式原型指向构造该对象的构造函数的原型 2、Function.prototype是所有函数的__proto__，因为Function也是函数，所以Function.proto===Function.prototype proto、prototype、constructor这三者之间的关系脉络如下图 ...
构造函数和原型详解
wutong_jun的博客
11-16 987
构造函数一种特殊的函数 构造函数存在的问题，构造函数方法很好用,但是存在浪费内存的问题。 构造函数原型prototype可以解决浪费内存的问题，构造函数通过原型分配的函数是所有对象所``共享``的。 对象原型_proto_，为什么对象能访问构造函数的原型对象? constructor构造函数 原型链 JavaScript的成员查找机制(规则)
JavaScript中构造函数及原型介绍
catjuting的博客
11-06 1776
一、构造函数及原型相关介绍1、构造函数 （1）构造函数始终都应该以一个大写字母开头；构造函数本身也是函数，只不过可以用来创建对象；要创建构造函数的新实例，必须使用new操作符； （2）构造函数例子：function Person(name,age,job){ this.name=name; this.age=age; this.job=job; this.sayN
原型模式（构造函数）
sunshinedec的博客
06-17 194
原型模式（构造函数） 利用原型模式，将方法定义在构造函数的原型对象上，解决对象需要多个方法，就需要在全局定义更多的函数，不便于自定义类型的统一管理的问题。 每个函数都有一个prototype属性，指向一个对象。 该对象包含应该由特定引用类型的实例共享的属性和方法。 该对象就是通过调用构造函数创建的对象的原型。 原型继承 利用构造函数构建对象结构（模板，近似于类），从语义上较为清晰的表达对象结构。 利用构造函数原型扩展，能方便的为该构造函数所创建的对象进行基于原型的扩展。 利用构造函数还可以进行基于原型
构造函数和原理
recallMei的博客
09-21 2767
构造函数 构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new一起使用，我们可以把对象中一些公共的属性和方法抽出来，然后封装到这个函数里面。 在js中，使用构造函数时要注意两点： 1.构造函数用于创建某一类对象，其首字母大写 2.构造函数要与new一起使用才有意义 new在执行是会做四件事情： 1.在内存中创建一个新的空对象 2.让this指向这个新的对象 3.执行构造函数里面的代码，给这个新对象添加属性和方法 4.返回这个新对象（所以构造函数里面不需要return） 实例
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值