JavaScript中的构造函数与原型

简介: JavaScript中的构造函数与原型

1.概述


在典型的OOP语言中(如Java),都存在类的概念。类就是对象的模板,对象就是类的实例。但是在ES6之前,JS中并没有引入类的概念。ES6全称是ECMAScript6.0,2015.06发布。但是,目前浏览器的JavaScript是ES5版本,大多数高版本的浏览器也支持ES6,不过只实现了ES6的部分特性和功能。在ES6之前,对象不是基于类创建的,而是用一种称为构造函数的特殊函数来定义对象和它们的特征创建对象可以通过下面三种方式


a.对象字面量;


1var obj2 = {
2    name: "CurryCoder",
3    age: 18
4};


b.new Object();


1var obj1 = new Object();


c.自定义构造函数;


1function Star(uname, age){
2    this.age = age;
3    this.uname = uname;
4    this.sing = function(){
5        console.log('我会唱歌...');
6    }
7}
8
9var ldh = new Star('刘德华', 18);


2.构造函数


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


在JS中,使用构造函数时要主要下面两点

a.构造函数用于创建某一类对象,其首字母要大写

b.构造函数要与new一起使用才有意义;

new在执行时会做下面四件事情

a.在内存中创建一个新的空对象;

b.让this指向这个新的空对象;

c.执行构造函数中的代码,给这个新对象添加属性和方法;

d.返回这个新对象(所以构造函数中不需要return语句);


3.静态成员和实例成员


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


静态成员:在构造函数本身上添加的成员,只能由构造函数本身来访问。


1function Star(uname, age){
 2    this.age = age;
 3    this.uname = uname;
 4    this.sing = function(){
 5        console.log('我会唱歌...');
 6    }
 7}
 8
 9// 静态成员:在构造函数本身上添加的成员
10Star.sex = '男';
11// 静态成员只能通过构造函数来访问,不能通过实例对象来访问
12console.log(Star.sex);


实例成员:在构造函数内部创建的对象成员(在构造函数内部通过this添加的成员),实例成员只能通过实例化的对象来访问。


1function Star(uname, age){
 2    // 实例成员
 3    this.uname = uname;
 4    this.age = age;
 5    this.sing = function() {
 6        console.log('我会唱歌');
 7    }
 8}
 9var ldh = new Star('刘德华');
10// 实例成员:构造函数内部通过this添加的成员。如uname age sing就是实例成员
11// 实例成员只能通过实例化的对象来访问,不可以通过构造函数来访问实例成员


4.构造函数存在的问题


构造函数创建对象虽然很好用,但是存在浪费内存的问题。如下例所示:


1function Star(uname, age){
 2    this.uname = uname;
 3    this.age = age;
 4    this.sing = function() {
 5        console.log('我会唱歌');
 6    }
 7}
 8
 9var ldh = new Star('刘德华', 18);
10var zxy = new Star('张学友', 19);
11
12console.log(ldh.sing === zxy.sing);  // false

25.png

我们希望所有的对象使用同一个函数,这样就比较节省内存。我们该如何做呢?


5.构造函数原型对象prototype


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

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


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


1// 构造函数
 2function Star(uname, age){
 3    this.uname = uname;
 4    this.age = age;
 5}
 6// 在构造函数的原型对象prototype中添加对象所共有的方法即可。
 7Star.prototype.sing = function() {
 8    console.log('我会唱歌');
 9}
10var ldh = new Star('刘德华', 18);
11var zxy = new Star('张学友', 19);
12console.log(ldh.sing === zxy.sing);  // true
13console.dir(Star);
14ldh.sing();
15zxy.sing();


一般情况下:我们把公共属性定义到构造函数当中;公共的方法我们放入原型对象prototype身上


6.对象原型__proto__


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


对象的__proto___属性指向了构造函数的prototype原型对象。因此,对象可以直接调用prototype原型对象中的公共方法。


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


1function Star(uname, age){
 2    this.uname = uname;
 3    this.age = age;
 4}
 5Star.prototype.sing = function(){
 6    console.log('我会唱歌');
 7}
 8
 9var ldh = new Star('刘德华', 18);
10var zxy = new Star('张学友', 19);
11ldh.sing();
12console.log(ldh);  // 对象身上系统自动添加了一个__prototype__指向我们构造函数的原型对象prototype。
13
14// __proto__对象原型和prototype原型对象是等价的
15console.log(ldh.__proto__ === Star.prototype);
16// 方法的查找规则:首先看ldh这个对象身上是否有sing这个方法,如果有就执行这个对象上的sing方法。如果没有sing这个方法,因为有__proto__的存在,就去构造函数原型对象prototype身上去查找sing这个方法。


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


26.png

7.constructor构造函数


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


constructor主要用于记录该对象引用于哪个构造函数,它可以让原型对象prototype重新指向原来的构造函数


如果我们修改了原来的原型对象prototype,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数。


1function Star(uname, age){
 2    this.uname = uname;
 3    this.age = age;
 4}
 5// 很多情况下,我们需要手动的利用constructor这个属性指回原来的构造函数
 6// Star.prototype.sing = function(){
 7//     console.log('我会唱歌');
 8// }
 9
10// Star.prototype.movie = function(){
11//     console.log('我会拍戏');
12// }
13
14Star.prototype = {
15// 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数。
16    constructor: Star, // 利用constuctor手动的指回原来的构造函数
17    sing: function(){
18        console.log('我会唱歌');
19    },
20    movie: function(){
21        console.log('我会拍戏');
22    }
23}
24
25var ldh = new Star('刘德华', 18);
26var zxy = new Star('张学友', 19);
27console.log(Star.prototype);
28console.log(ldh.__proto__);
29console.log(Star.prototype.constructor);
30console.log(ldh.__proto__.constructor);


8.构造函数、实例、原型对象三者之间的关系


27.png


9.原型链


只要是对象就会有__proto__原型,它就会指向原型对象prototype。


1function Star(uname, age){
 2    this.uname = uname;
 3    this.age = age;
 4}
 5
 6Star.prototype.sing = function(){
 7    console.log('我会唱歌');
 8}
 9
10var ldh = new Star('刘德华', 18);
11
12// 1.只要是对象就会有__proto__原型,指向原型对象
13console.log(Star.prototype);
14// 2.Star原型对象里面的__proto__原型指向的是Object.prototype
15console.log(Star.prototype.__proto__ === Object.prototype);  // true
16// 3.Object.prototype原型对象里面的__proto__原型指向为null
17console.log(Object.prototype.__proto__);

28.png


10.JavaScript的成员查找机制(规则)


查找流程如下


(1).当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性。

(2).如果没有就查找它的原型(也就是proto指向的prototype原型对象)。

(3).如果还没有就查找原型对象的原型(Object的原型对象)。

(4).依次类推一直找到Object为止(null)。

(5).__proto__对象原型的意义就在于为对象成员查找机制提供了一个方向,或者说是一条路线。


11.原型对象this指向


在构造函数中,里面的this指向的是实例对象。原型对象里面的this指向的是实例对象。


1function Star(uname, age){
 2    this.uname = uname;
 3    this.age = age;
 4}
 5var that;
 6Star.prototype.sing = function(){
 7    console.log('我会唱歌');
 8    that = this;
 9}
10
11var ldh = new Star('刘德华', 18);
12
13// 1.在构造函数中,里面的this指向的是实例对象ldh
14ldh.sing();
15
16// 2.原型对象里面的this指向的是实例对象ldh
17console.log(that === ldh);


12.相关资料


[1] https://github.com/cdlwhm1217096231/HTML_CSS_JavaScript/tree/master/JavaScript

相关文章
|
3月前
|
JavaScript 前端开发
JS中的构造函数的含义和用法
构造函数是JavaScript中用于创建新对象的特殊函数,通常首字母大写。通过`new`关键字调用构造函数,可以初始化具有相同属性和方法的对象实例,从而实现代码复用。例如,定义一个`Person`构造函数,可以通过传入不同的参数创建多个`Person`对象,每个对象都有自己的属性值。此外,构造函数还可以包含方法,使每个实例都能执行特定的操作。构造函数的静态属性仅能通过构造函数本身访问。ES6引入了`class`语法糖,简化了类的定义和实例化过程。
53 1
|
3月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
49 1
JavaScript中的原型 保姆级文章一文搞懂
|
3月前
|
存储 前端开发 JavaScript
JavaScript常用的内置构造函数
JavaScript提供的内置构造函数在数据处理、对象创建、异常处理和异步操作等方面发挥了重要作用。掌握这些构造函数及其用法,对于开发高效、可靠的JavaScript应用至关重要。通过合理使用这些内置构造函数,开发者可以更好地管理和操作各种类型的数据,提升开发效率和代码质量。
35 1
|
5月前
|
JavaScript 前端开发
JavaScript prototype(原型对象)
JavaScript prototype(原型对象)
67 0
|
5月前
|
JSON JavaScript 前端开发
js原型继承|26
js原型继承|26
|
5月前
|
JavaScript 前端开发
JavaScript基础知识-原型(prototype)
关于JavaScript基础知识中原型(prototype)概念的介绍。
58 1
|
5月前
|
JavaScript 前端开发
JavaScript基础知识-构造函数(也称为"类")定义
本文介绍了JavaScript中构造函数(也称为“类”)的定义和使用方法。
56 1
JavaScript基础知识-构造函数(也称为"类")定义
|
6月前
|
JavaScript 前端开发
JavaScript中什么是原型?有什么用?
JavaScript中什么是原型?有什么用?
30 1
|
6月前
|
JavaScript 前端开发
如何在JavaScript中实现基于原型的继承机制
【8月更文挑战第14天】如何在JavaScript中实现基于原型的继承机制
40 0
|
6月前
|
设计模式 JavaScript 前端开发
js对原型和继承的理解
了解JavaScript中原型和继承的概念对于编写优雅高效的代码、理解库和框架的内部机制以及执行高级设计模式都有着重要的意义。
53 0

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    45
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    28
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55