当前位置: 首页 > news >正文

JavaScript构造函数(new构造js对象与原型链prototype)

构造函数详解
  • 铺垫:面向对象编程
  • 一、构造函数是什么?
  • 二、构造函数的作用?
  • 三、构造函数的执行过程?
  • 四、构造函数的返回值?
  • 五、构造函数为什么要用new关键字调用?
  • 六、构造函数的实例成员和静态成员?
  • 七、内置构造函数?

铺垫:面向对象编程

1、面向对象编程的第一步,就是要生成对象
2、例如典型的面向对象编程语言C++、Java,存在“类”(class)这个概念:“类”就是“对象”的模板,“对象”就是“类”的实例
3、在js语言的对象体系中,不是基于“类”的,而是基于构造函数(constructor)原型链(prototype)的;

4、“对象”是单个实物的抽象,通常需要一个模板,表示某一类实物的共同特征,然后“对象”根据这个模板生成。
5、js语言中使用构造函数(constructor)作为一个生成对象的模板,可以以此生成多个对象,每个对象都有相同的结构

6、举例:生产10000辆颜色不同的汽车,就会先造一个汽车模子,然后再按照这个模子造出汽车基本雏形。那这个例子里面的汽车模子就是构造函数,每一辆汽车就是实例,构造函数生成的实例都有相同的结构,颜色可能有所不同。

一、构造函数是什么?

在js中,任何用new关键字来调用的函数,都叫做构造函数,一般首字母大写。(强调new关键字,见目录五)

/* 构造函数 */
function Person (name, age) {this.name = name // 属性、方法前必须加this,this表示当前运行时的对象this.age = agethis.say = function (word) {console.log('我是人')return word}
}

/* 实例对象 */
var per = new Person(‘Jack’, 16)

console.log(per) // Person {name: ‘Jack’, age: 10, say: f}
console.log(per.constructor) // f Person() {} // 构造函数原型
console.log(per.name) // Jack
console.log(per.age) // 10
console.log(per.say(‘我是高中生’)) // 我是高中生

二、构造函数的作用?

1、使用对象字面量创建一系列同一类型的对象时,这些对象可能具有一些相似的特征(属性)和行为(方法),降低代码冗余,提高代码复用率。
2、构造新对象,设置对象的属性和方法。

三、构造函数的执行过程?

示例代码

 function Person(name, gender, hobby) {this.name = name;this.gender = gender;this.hobby = hobby;this.age = 6;
}var p1 = new Person('Jack', 'male', 'basketball'); // 创建一个新的内存 #f1var p2 = new Person('Mary', 'female', 'dancing'); // 创建一个新的内存 #f2var p3 = new Person('Jane', 'female', 'singing'); // 创建一个新的内存 #f3

代码分析:构造函数执行过程
1、一开始,Person函数还不叫作构造函数,当使用 new 关键字调用Person函数时,Person函数才叫做 构造函数
2、以 new 关键字调用时,会创建一个新的 内存空间#f1 ,标记为 Person 的 实例
2、函数体内部的 this 指向该内存空间#f1
3、执行函数体内的代码:给 this 添加属性,就相当于给实例添加属性name、gender、hobby、age;
4、默认返回this:就相当于默认返回了该内存空间,也就是上图中的 #f1 等。此时,#f1的内存空间被变量p1所接受。也就是说 p1 这个变量,保存的内存地址就是 #f1,同时被标记为 Person 的实例。

四、构造函数的返回值?

1、没有return,默认返回this - 具体原因见目录三:执行过程

function Person1 (name) {this.name = name
}
var p1 = new Person1('Tom')
console.log(p1) // Person1 {name: 'Tom'}

2、return 基本数据类型,最终返回this

function Person2 (name) {this.name = namereturn 'zhangsan'
}
var p2 = new Person2('Jack')
console.log(p2) // Person2 {name: 'Jack'}

3、return 复杂数据类型(对象),返回该that对象,this对象被丢失

function Person3 (name) {this.name = namevar that = [1, 2, 3]return that
}
var p3 = new Person3('Jack')
console.log(p3) // [1, 2, 3]

五、构造函数为什么要用new关键字调用?

1、使用new关键字调用this对象指向构造函数生成的对象实例

function Person (name) {this.name = namethis.say = function () {return `I am ${this.name}`}
}
var p1 = new Person('Jack')
console.log(p1.say()) // I am Jack

伪代码:同目录三:执行过程
1、使用new关键字调用Person函数时,Person函数才被称为构造函数;
2、创建一个this变量,该变量指向一个空对象/#f1内存空间,并且该对象继承Person函数的原型;
3、属性和方法被加入到this引用的对象中;
4、隐式返回this对象(如果没有显性返回其他对象,见目录四构造函数的返回值)

// 伪代码:
function Person (name) {// 使用new关键字时,创建this变量,指向空对象var this = {} // 空对象/#f1内存空间// 属性和方法被加入到this引用的对象中this.name = namethis.say = function () {return `I am ${this.name}`}// 返回this对象return this
}

2、直接调用:this对象指向window,不会默认返回任何对象

var p2 = Person('Tom')
console.log(p2) // undefined
console.log(window.name) // Tom
console.log(window.say()) // I am Tom

六、构造函数的实例成员和静态成员?

/* 构造函数 */
/* 构造函数中,实例成员就是构造函数内部通过this添加的成员,name、age、say就是实例成员,实例化后可以访问的成员 */
/* 通过prototype添加的成员是实例成员,也就是只要是实例化的对象都可以访问到 */
function Person(name) {this.name = name // 实例成员this.say = function (word) { // 实例成员return word}
}
Person.height = '188' // 静态成员 - 在构造函数上添加的成员
Person.prototype.weight = '50kg' // 实例成员 - 在构造函数原型链上添加的成员
var p1 = new Person('Tom') // 实例化对象
Person.age = 20 // 静态成员
Person.prototype.married = true // 实例成员
/* 静态成员只能通过构造函数进行访问 */
console.log(p1.height) // undefined
console.log(p1.age) // undefined
console.log(Person.height) // '188'
console.log(Person.age) // 20
/* 实例成员只能通过实例对象进行访问 */
console.log(p1.name) // 'Tom'
console.log(p1.weight) // '50kg'
console.log(p1.married) // true
console.log(p1.say('我是大学生')) // '我是大学生'
console.log(Person.name) // Person
console.log(Person.weight) // undefined
console.log(Person.married) // undefined
console.log(Person.say('我是大学生')) // Uncaught TypeError: Person.say is not a function

七、内置构造函数?

Object、Array、String、Boolean、Number、Date等等
他们都可以使用new关键字生成实例:var xxx = new XXX();

http://www.lryc.cn/news/331496.html

相关文章:

  • 【WPF应用31】WPF基本控件-ListView的详解与示例
  • 【动态】江西省小型水库安全监测能力提升试点项目通过验收
  • 前视声呐目标识别定位(九)-声呐驱动
  • 【详解】Windows系统安装Nginx及简单使用
  • WebGPU vs. WebGL:前端图形技术的进化与数字孪生的崭新前景
  • 即刻体验 | 使用 Flutter 3.19 更高效地开发
  • Exchanger 怎么用J.U.C
  • 校园局域网钓鱼实例
  • 网络原理 - HTTP / HTTPS(3)——http响应
  • Flask Python:模糊查询filter和filter_by,数据库多条件查询
  • leetcode 热题 100(部分)C/C++
  • 梨花带雨网页音乐播放器二开优化修复美化版全开源版本源码
  • 如何通过Spring提供的EL表达式执行bean的属性或方法?
  • SSTI 服务器端模板注入(Server-Side Template Injection)
  • Vue.js---------Vue基础
  • 力扣经典150题第一题:合并两个有序数组
  • Git:日志修改
  • 【数据库】MySQL InnoDB存储引擎详解 - 读书笔记
  • GPT-2原理-Language Models are Unsupervised Multitask Learners
  • 逆向案例十二——看准网企业信息json格式的信息
  • docker安装jenkins 2024版
  • 输入url到页面显示过程的优化
  • Linux(centos7)部署hive
  • LeetCode | 数组 | 双指针法 | 27. 移除元素【C++】
  • 【Apache Doris】周FAQ集锦:第 2 期
  • jQuery(二)
  • MIT6.828 实验环境安装教程
  • 一文彻底搞清 Iterator(遍历器)概念及用法
  • 稀疏矩阵的三元组表表示法及其转置
  • docker安装rabbitMQ,并且创建账号