JavaScript构造函数与原型对象

已于 2022-05-06 22:37:41 修改
阅读量776 收藏 5
点赞数 2
分类专栏： JavaScript 文章标签： JavaScript 前端
于 2021-11-24 20:45:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46612221/article/details/121480662
版权

JavaScript构造函数与原型对象

1 构造函数

1.1 概述

在面向对象的语言中，都存在类的概念，类就是对象的模板，对象就是类的实例，但在ES6之前，JavaScript中并没有引入类的概念。

在ES6之前，对象不是基于类创建的，而是用一种称为构造函数的特殊函数来定义对象和它们的特征。构造函数主要用来创建对象，并为对象的成员赋初始值。

创建对象可以用以下三种方法：①对象字面量；②new Object()；③自定义构造函数。

// 1、利用对象的字面量创建对象
let obj1 = {};

// 2、利用new Object()创建对象
let obj2 = new Object();

那么如何创建一个构造函数呢，构造函数也是用function来定义的，并且为构造函数传入的参数需要在函数内部使用this进行初始化，语法如下：

function 构造函数名(arg1, arg2) {
    this.arg1 = arg1;
    this.arg2 = arg2;
}

构造函数中的方法使用this进行定义，语法如下：

function 构造函数名() {
    this.方法名 = function () {
        // 具体代码
    }
}

为构造函数创建实例对象使用new关键字，语法如下：

var 实例对象名 = new 构造函数名([参数]);

示例：创建Person构造函数，并创建实例对象

// 创建构造函数，传入姓名和年龄参数
function Person(name, age) {
    // 初始化对象
    this.name = name;
    this.age = age;

    // 定义sing方法
    this.sing = function () {
        console.log(this.name + "会唱歌");
    };
}

// 创建实例对象
var p1 = new Person("张三", 18);

console.log(p1); // Person { name: '张三', age: 18, sing: [Function (anonymous)] }
p1.sing(); // 张三会唱歌

在JavaScript中，使用构造函数时要注意以下两点：
1、构造函数用于创建某一类对象，首字母要大写
2、构造函数要和new一起使用才有意义

1.2 静态成员和实例成员

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

  • 静态成员：在构造函数本身上添加的成员，只能由构造函数本身来访问
  • 实例成员：在构造函数内部创建的对象成员，只能由实例化的对象来访问

例如，在下面一段代码中，name、age、sing就是实例成员，因为它们都是通过this进行添加的，访问这些实例成员只能通过实例对象p1来访问。

// 创建构造函数，传入姓名和年龄参数
function Person(name, age) {
    // 初始化对象
    this.name = name;
    this.age = age;

    // 定义sing方法
    this.sing = function () {
        console.log(this.name + "会唱歌");
    };
}

// 创建实例对象
var p1 = new Person("张三", 18);

在下面这段代码中，sex和say是静态成员，因为它们是通过构造函数本身添加的，并且只能由构造函数本身来访问。

// 添加静态属性
function Person(name) {
    this.name = name;
}
Person.sex = "男"; // 添加静态属性sex
console.log(Person.sex); // 男

// 添加静态方法
function Person(name) {
    this.name = name;
}
Person.say = function () { // 添加静态方法say
    console.log("你好");
};
Person.say(); // 你好

1.3 构造函数和类的区别

类中的成员方法是定义在类中的，使用类创建对象后，这些对象的方法都是引用了同一个方法，这样可以节省内存空间。

示例代码：

class Person { // 定义一个Person类
    sing() { // 定义唱歌方法
        console.log('hello');
    }
}
var p1 = new Person(); // 创建对象
var p2 = new Person(); // 创建对象
console.log(p1.sing === p2.sing); // true

1.4 构造函数与普通函数的区别

1、调用方式不同。

function Fun() { }
Fun(); // 普通函数调用方法
var f = new Fun(); // 构造函数调用方法

2、作用不同。构造函数用来新建实例对象。
3、首字母大小写不同。一般构造函数的函数名称会用大写，普通函数用小写。
4、函数中this的指向不同。普通函数中的this，在严格模式下指向undefined，非严格模式下指向window对象。构造函数的this则是指向它创建的对象实例。

// 普通函数
function Fun() {
    console.log(this === window);
}
Fun(); // true

// 构造函数
function Fun() {
    console.log(this); // Fun {}
}
var f = new Fun();

5、写法不同。构造函数使用new关键字，不使用return；普通函数使用return，不使用new关键字。

2 原型对象

2.1 概述

构造函数虽然很好用，但是存在一个问题，那就是会浪费内存。下面代码中，两个实例对象使用同一个函数，但是它们两个的sing内存地址却不一样，造成了内存浪费。

function Person() { // 定义一个Person构造函数
    this.sing = function () { // 定义唱歌方法
        console.log('hello');
    }
}
var p1 = new Person(); // 创建对象
var p2 = new Person(); // 创建对象
console.log(p1.sing === p2.sing); // false

这个问题可以使用原型对象来解决。每个构造函数（类）都有一个原型对象存在（默认存在），这个原型对象通过构造函数的prototype属性来访问。原型对象可以共享方法。我们可以将不变的方法直接定义在prototype对象上，这样所有对象的实例就可以共享这些方法。

示例代码：

function Person() { } // 定义函数
console.log(Person.prototype); // 输出原型对象：{}
console.log(typeof Person.prototype); // 输出类型：object

通过原型对象增加方法：

构造方法名.prototype.添加的方法名 = function([参数]) {
    //方法体语句
}

示例代码：利用原型对象共享方法

function Person(uname) { // 构造函数　Person
    this.uname = uname; // 初始化对象
}
Person.prototype.sayHello = function () { // 给　Person　增加　sayHello()　方法
    console.log('你好，我叫' + this.uname);
};
var p1 = new Person('张三'); // 创建实例对象
var p2 = new Person('李四');
console.log(p1.sayHello === p2.sayHello); // 输出结果：true
p1.sayHello(); // 输出结果：你好，我叫张三
p2.sayHello(); // 输出结果：你好，我叫李四

2.2 访问对象的原型对象

每个对象都有一个默认的属性__proto__属性，该属性指向对象的原型对象。

示例：

function Person() { }
var p1 = new Person(); // 创建实例对象
console.log(p1.__proto__ === Person.prototype); // true

实例对象和原型对象：
1、实例对象：使用new运算符创建的对象
2、原型对象：①通过构造方法名(类名).prototype得到的对象；②通过对象的__proto__属性得到的对象

在这里插入图片描述

2.3 访问对象的构造函数

在原型对象里面有一个constructor属性，该属性指向了构造函数本身。constructor主要用于记录该对象引用哪个构造函数，它可以让原型对象重新指向原来的构造函数。具体语法如下：

//　通过原型对象来访问构造方法
构造方法名(类名).prototype.constructor

//　通过实例对象访问构造方法
实例对象名.constructor

示例代码：ES5通过原型对象访问构造函数

function Student(name, gender) {
    this.name = name; // this指向自己
    this.gender = gender;
}
var s1 = new Student("张三", "男");

console.log(Student.prototype.constructor); // [Function: Student]
console.log(Student.prototype.constructor === Student); // true

console.log(s1.constructor); // [Function: Student]
console.log(s1.constructor === Student); // true

示例代码：ES6通过原型对象访问构造函数

class Student {
    constructor(name, gender) {
        this.name = name;
        this.gender = gender;
    }
}
var s1 = new Student("张三", "男");

console.log(Student.prototype.constructor); // [class Student]
console.log(Student.prototype.constructor === Student); // true

console.log(s1.constructor); // [class Student]
console.log(s1.constructor === Student); // true

如果用赋值的方式修改原型对象为新的对象，就无法访问构造函数，示例代码如下：

function Person() { } // Person构造函数

// 修改原型对象为一个新的对象
Person.prototype = {
    sayHello: function () { // 添加方法sayHello
        console.log("hello");
    }
};

var p1 = new Person(); // 创建实例对象

// 使用实例对象p1可以访问新的原型对象中的属性
p1.sayHello(); // hello

// 使用constructor属性无法访问原来的构造函数
console.log("修改后的原型对象：", p1.constructor); // 修改后的原型对象： [Function: Object]

原型对象修改后，需要手动利用constructor指回原来的构造函数，示例代码如下：

function Person() { } // Person构造函数

// 修改原型对象为一个新的对象
Person.prototype = {
    constructor: Person, // 指回原来的构造函数
    sayHello: function () {
        console.log("hello");
    }
};

var p1 = new Person(); // 创建实例对象

console.log(p1.constructor); // [Function: Person]

在这里插入图片描述

2.4 原型对象的原型对象

原型对象也是对象，那么这个对象应该也会有一个原型对象存在。查看原型对象的原型对象的方法：

构造方法名/类名.prototype.__proto__

示例代码：

function Person() { }
// 查看原型对象的原型对象
console.log(Person.prototype.__proto__); // [Object: null prototype] {}
// 查看原型对象的原型对象的构造函数
console.log(Person.prototype.__proto__.constructor); // [Function: Object]

示例代码：Person.prototype.__proto__这个对象其实就是Object.prototype对象。

function Person() { }
console.log(Person.prototype.__proto__ === Object.prototype); // true
var obj = { "a": 1 };
console.log(obj.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__); // 输出结果：null

2.5 原型链

原型链结构的特点：

  1. 每个构造函数都有一个原型对象：通过prototype属性访问
  2. 原型对象通过constructor属性指回构造函数
  3. 实例对象通过__proto__属性指向原型对象
  4. Object的原型对象的__proto__是null

原型链结构图：
在这里插入图片描述

2.6 函数在原型链中的结构

function Person() { }; // 创建Person构造函数
var p1 = new Person(); // 创建Person实例对象

// 访问Person原型对象
console.log(Person.prototype); // {}
console.log(p1.__proto__); // {}

// 访问Person构造函数
console.log(Person.prototype.constructor); // [Function: Person]
console.log(p1.constructor); // [Function: Person]

// 访问Function原型对象
console.log(Person.__proto__); // {}

// 访问FUnction构造函数
console.log(Person.__proto__.constructor); // [Function: Function]

// Function构造函数访问FUnction原型对象
console.log(Person.__proto__.constructor.prototype); // {}
console.log(Person.__proto__.constructor.__proto__); // {}

// Person构造函数访问Object原型对象
console.log(Person.prototype.__proto__); // [Object: null prototype] {}c

// Function原型对象访问Object原型对象
console.log(Person.__proto__.__proto__); // [Object: null prototype] {}

// 访问Object构造函数
console.log(Person.prototype.__proto__.constructor); // [Function: Object]
console.log(Person.__proto__.__proto__.constructor); // [Function: Object]

// Object构造函数访问Object原型对象
console.log(Person.prototype.__proto__.constructor.prototype); // [Object: null prototype] {}

// Object构造函数访问Function原型对象
console.log(Person.prototype.__proto__.constructor.__proto__); // {}
console.log(Person.__proto__.__proto__.constructor.__proto__); // {}

// 访问原型对象的原型对象的原型对象
console.log(Person.prototype.__proto__.__proto__); // null
console.log(Person.__proto__.__proto__.__proto__); // null

在这里插入图片描述

2.7 成员查找机制

1、当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。
2、如果没有就查找它的原型（也就是__proto__指向的prototype原型对象）。
3、如果还没有查找原型对象的原型对象（Object的原型对象）。
4、以此类推，一直找到Object为止（null）。

示例代码：

function Person() { // 构造Person函数
    this.name = "张三"; // 初始化
}
Person.prototype.name = "李四"; // 给构造函数的原型对象的name属性赋值为李四

var p = new Person(); // 创建对象

console.log("姓名：", p.name); // 先在对象中查找，输出张三

delete p.name; // 删除对象p的成员name
console.log("姓名：", p.name); // 再从函数的原型对象中查找，输出李四

delete Person.prototype.name; // 删除函数的原型对象中的name
console.log("姓名：", p.name); // 再找原型对象的原型对象，输出undefined

示例代码：利用原型对象扩展数组的方法——求数组元素之和

// Array：内置对象，下面扩展Array数组的方法
Array.prototype.sum = function () { // 为Array的原型对象定义sum函数，求数组的和
    var sum = 0; // 局部变量
    for (var i = 0; i < this.length; i++) { // this代表当前的对象
        sum += this[i];// 将当前对象的每一项相加
    }
    return sum; // 返回sum
}
var arr = [12, 32, 42, 50];
console.log("数组元素之和：", arr.sum()); // 136

2.8 原型对象的this指向

1、在构造函数中，this指向对象的实例

var that; // 保存this
function Person(name) {
    this.name = name;
    that = this; // this赋值给that
};
var xm = new Person("小明");
console.log(that); // Person { name: '小明' }
console.log(that === xm); // true

2、原型对象函数里面的this指向了对象的实例

var that; // 保存this

function Person() { }
Person.prototype.say = function () {
    that = this; // 赋值this
}
var xm = new Person();
xm.say(); // 调用函数

console.log(that); // Person {}
console.log(that === xm); // true
橘猫吃不胖～
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript构造函数的方法与原型对象
weixin_57725431的博客
06-01 253
前言：各位csdn的源员们，大家好。我是小刘，初来乍到请大家多多指教，这是第10次发表博客，如有错误请大家观看后谅解，并在评论区留下您宝贵的意见，小刘将会用最大的努力去改正以及认真对待每一次代码的编写，请大家一定要多多包涵，你们的支持是我继续努力的最大动力，当然大家觉得不错可以关注我喔，带你走遍代码的每一个角落，让你感受代码的神奇之处。 首先我向大家透露一点点小方法，一定要认真观看喔！ 本次用到的编程软件：DW 本次涉及到的内容：html,css以及javaScript ...
JavaScript构造函数和原型
m0_71102752的博客
05-18 74
执行构造函数里面的代码，给这个新对象添加属性和方法。 返回这个新对象（所以构造函数里面不需要 return ）。 JavaScript 的构造函数中可以添加一些成员，可以在构造函数本身上添加，也可以在构造函数内部的 this 上添加。通过这两种方式添加的成员，就分别称为静态成员和实例成员。 实例成员：在构造函数内部创建的对象成员称为实例成员，只能由实例化的对象来访问。 静态成员：在构造函数本上添加的成员称为静态成员，只能由构造函数本身来访问 。 例如： function A(uname,age)..
JavaScript面向对象（二）
小王的博客
06-16 333
JavaScript面向对象中的原型链、this关键字、错误处理、继承
JavaScript——原型与原型链
yuxinSir的博客
07-03 225
一、prototype 在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。 原型的概念：每一个javascript对象(除null外)创建的时候，就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型中“继承”属性。 让我们用一张图表示构造函数和实例原型之间的关系： 二、proto 这是每个对象(除null外)都会有的属性，叫做__proto__，这个属性会指向该对象的原型。 三、constructor 每个原型都有一个constructor
JavaScript中的一等公民: 函数(Function)
最新发布
qq_44621394的博客
09-21 494
函数的基础使用使用函数表达式或者函数声明去创建一个函数函数声明整体提升,函数表达式只提升变量匿名函数构造函数构造函数返回一个对象,使用new操作符执行构造函数构造函数执行的过程:1. 生成一个对象将this绑定到这个对象 2. 执行构造函数的代码 3.返回结果构造函数默认返回一个对象,手动返回应用类型的数据将代替默认的返回结果闭包闭包产生的三个条件:1. 函数嵌套 2.内部函数使用了外部函数作用域内的变量 3.被返回的内部函数在外部作用域有被引用。
JS 对象原型学习笔记function Person(name,age,sex) { this.name = name; this.age = age; this.sex =
javaEE_zero的博客
04-11 3507
JS原型学习笔记
Chrome的控制台（Console）的用法（超详细，还未细看）
热门推荐
小枯林的博客
06-12 3万+
为什么写了本篇博客： （1）在https://blog.csdn.net/csucsgoat/article/details/117811466中，遇到了Chrome的控制台（Console）；本篇博客就是详细介绍Console的。 本篇博客转载自： （1）Chrome 控制台console的用法（学了之后对于调试js可是大大有用的哦） 说明： （1）这篇博客并没有看，当前也没必要看~~，以后有需要了再看也不迟啦 Chrome 控制台console的用法（学了之后对于调试js可是...
深入理解javascript构造函数和原型对象
10-25
对象，是javascript中非常重要的一个梗，是否能透彻的理解它直接关系到你对整个javascript体系的基础理解，说白了，javascript就是一群对象在搅。。（哔！）。
javascript构造函数以及原型对象的理解
01-21
以下是一个构造函数的例子 如果是实例方法，不同的实例化，它们引用的地址是不一样的，是唯一的。 //定义一个构造函数 function People(name,age){ this.name=name; this.age=age; this.dothings=function(){ ...
JavaScript中构造函数与原型链之间的关系详解
10-17
在JavaScript中，构造函数和原型链是实现面向对象编程的核心机制。它们共同构成了JavaScript的类继承模型。让我们深入探讨这两个概念及其之间的关系。 1. 构造函数（Constructor）： - 构造函数是一种特殊类型的...
函数相关面试题
corn78的博客
02-13 555
一、 在javascript中，(B)变量在函数外声明，并可从脚本的任意位置访问 A.局部 B.全局 C.typeOf D.New 1.局部变量 一般定义在函数体内，有函数作用域，外部不能访问内部局部变量。 2.全局变量，在任何函数之外声明的变量，而全局变量在任意函数中都是可见的。 3.typeof 判断变量数据类型 4.new用于创建一个实例化对象 二、 以下对call() 和 apply() ...
JS内容课后作业
weixin_49647262的博客
09-26 2283
1.单选题(1分) 这个问题测试你对协议层和封装的理解。 在发送端有一个自上到下的协议栈，使用SPDY协议，TCP，IPv6和ADSL发送消息。在网络的“线”上，消息是怎样封装起来的？ 我们使用每一个协议的第一个字母来代表它的头，例如，S为SPDY头，再加上M代表发送该协议栈的消息。这些部分以它们被发送的顺序来写，因此，第一部分在最左边。 A .AITSM B .MAITS C .AM D .MSTIA 本题得分：1 我的答案：A 正确答案：A 收起解析...
JavaScript 构造函数
zsx0728的博客
04-18 315
文章目录使用构造函数创建多个对象JavaScript this 关键字JavaScript 构造函数的形参创建对象：构造函数 VS 对象字面量（Object Literal）在对象中添加属性和方法JavaScript 对象原型JavaScript 内置构造函数参考文档     在本教程中，您将借助示例了解 JavaScript 构造函数。     在 JavaScript 中，构造函数用于创建对象。例如， // constructor function function Person () { th
[乐意黎转载]JavaScript中原型对象的彻底理解
打杂人
12-05 840
一、什么是原型 原型是Javascript中的继承的继承，JavaScript的继承就是基于原型的继承。 1.1 函数的原型对象 ​ 在JavaScript中，我们创建一个函数A(就是声明一个函数), 那么浏览器就会在内存中创建一个对象B，而且每个函数都默认会有一个属性 prototype 指向了这个对象( 即：prototype的属性的值是这个对象 )。这个对象B就是函
原型链
l624702662的博客
11-10 290
原型链 原型：每一个构造函数都有一个 prototype 属性，指向另一个对象。这个 prototype 就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有。 原型的作用：资源共享。 实例对象原型：实例对象有一个属性 proto 指向构造函数的 prototype 原型对象。 实例对象原型__proto__和构造函数的prototype是等价的。 方法的查找规则：首先先看对象身上是否有方法,如果有就执行这个对象上的方法，如果么没有这个方法,因为有__proto__ 的存在,就去构造函数原型对象pr
每日一题：1.function Person(firstName, lastName) { this.firstName = firstName； this.lastName = lastNa
卡卡西：一个擅长拷贝的前端程序员
05-14 1004
Question：如下输出什么？ function Person(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } const member = new Person('Lydia', 'Hallie'); Person.getFullName = function() { return `${this.firstName} ${this.lastName}`; }; consol
JavaScript中的构造函数和原型对象
java小兵
08-01 707
JavaScript中的构造函数和原型对象 构造函数：JavaScript中的构造函数可以用来创建特定类型的对象。 1)原生的构造函数： var obj = new Object(); var array = new Array(); 2)自定义的构造函数 注意： 1)构造函数建议以大写字母开头。 2)如果构造函数以小写字母开头(eg：func
原型链相关知识点学习
DoinA的博客
11-25 189
原型链相关知识点 构造函数、原型和实例的关系 构造函数有一个属性prototype，这个属性是一个对象----Object的实例 原型对象prototype里面有一个constructor属性，该属性指向原型对象所属的构造函数 实例对象都有一个_proto_属性，该属性也指向构造函数的原型对象，它是一个非标准属性，不可以用于编程，它是用于浏览器自己使用的 prototype与_proto_的关系 prototype是构造函数的属性 _proto_是实例对象的属性 两者指向同一个对象
function-a(){}与var-b-=-function(){}的区别
hellosnowyy
08-11 2896
function a(){}与var b = function(){}的区别
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值