ES6 —— 构造函数和原型

已于 2022-04-26 19:20:24 修改
阅读量2.4k 收藏 14
点赞数 3
分类专栏： JavaScript、ES6 文章标签： JavaScript ES6
于 2022-04-25 21:53:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45902692/article/details/124414381
版权

文章目录

1、利用构造函数创建对象
  1. 构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量附初始值，它总与 new 一起使用。我们可以把对象中一些公共属性和方法抽取出来，然后封装到这个函数里面。
  2. new 在执行时会做的四件事情：
  1. 在内存中创建一个新的空对象。
  2. 让 this 指向这个新的对象。
  3. 执行构造函数里面的代码，给这个新对象添加属性和方法。
  4. 返回这个新对象（所以构造函数里面不需要 return）
	// 利用构造函数创建对象
    function Star(uname, age){
        this.uname = uname
        this.age = age
        this.sing = function() {
            console.log('I can sing')
        }
    }
    let a = new Star('毛不易', 20)
    console.log(a) //Star {uname: '毛不易', age: 20, sing: ƒ}
    a.sing() //I can sing
2、实例成员和静态成员
  1. 实例成员：构造函数内部通过 this 添加的成员。只能通过实例化的对象来访问。
  2. 静态成员：在构造函数本身上添加的成员。只能通过构造函数来访问。
	// 构造函数中的属性和方法我们称为成员 成员可以添加
    function Star(uname, age){
        this.uname = uname
        this.age = age
        this.sing = function() {
            console.log('I can sing');
        }
    }
    let a = new Star('毛不易', 20)
    // 1. 实例成员就是构造函数内部通过this添加的成员 uname age sing 就是实例成员
    // 实例成员只能通过实例化的对象来访问
    console.log(a.uname) //毛不易
    a.sing() //I can sing

    // console.log(Star.uname) //undefined  不可以通过构造函数来访问实例成员

    // 2.静态成员 在构造函数本身上添加的成员 sex 就是静态成员
    Star.sex = '男'
    // 静态成员只能通过构造函数来访问
    console.log(Star.sex) //男
    // console.log(a.sex) //undefined 不能通过对象来访问
3、构造函数原型对象 prototype
  1. 构造函数的问题：存在浪费内存的问题。
	function Star(uname, age){
        this.uname = uname
        this.age = age
        this.sing = function() {
            console.log('I can sing');
        }
    }
    let a = new Star('毛不易', 20)
    let b = new Star('水木年华', 25)
    console.log(a.sing === b.sing) //false 因为会创建两个函数
  1. 构造函数原型 prototype：构造函数通过原型分配的函数是所有对象所 共享的。
  1. JavaScript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象。注意这个 prototype 就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有。
  2. 我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有的实例就可以共享这些方法。
  3. 原型是什么？一个对象，我们也成为 prototype 为 原型对象。
  4. 原型的作用：共享方法。
	function Star(uname, age){
        this.uname = uname
        this.age = age
    }
    Star.prototype.sing = function(){
        console.log('I can sing')
    }
    let a = new Star('毛不易', 20)
    let b = new Star('水木年华', 25)
    console.log(a.sing === b.sing)

    a.sing() //I can sing
    b.sing() //I can sing
4、对象原型 __proto__
  1. 对象都会有一个属性 __proto__ 指向构造函数的 prototype 原型对象，之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法，就是因为对象有 __proto__ 原型的存在。
  2. __proto__ 对象原型和原型对象 prototype 是等价的
  3. __proto__ 对象原型的意义在于为对象的查找机制提供一个方向，或者说一条线路，但是它是一个非标准属性，因此在实际开发中，不可以使用和这个属性，它只是内部指向原型对象 prototype。
	function Star(uname, age){
        this.uname = uname
        this.age = age
    }
    Star.prototype.sing = function(){
        console.log('I can sing');
    }
    let a = new Star('毛不易', 20)
    let b = new Star('水木年华', 25)
    a.sing() //I can sing
    console.log(a) //Star {uname: '毛不易', age: 20} 对象身上系统自己添加一个 __proto__ 指向我们构造函数的原型对象
    console.log(a.__proto__ === Star.prototype) //true
    // 方法查找规则:
    // 如果a 对象上有sing 方法 就执行这个对象上的 sing
    // 如果没有sing 这个方法 因为有__proto__的存在 就去构造函数原型对象 prototype 身上去查找sing 这个方法
5、constructor 构造函数
  1. 对象原型（__proto__）和构造函数（prototype）原型对象里面都有一个constructor 属性，constructor 我们称为构造函数，因为它指回构造函数本身。
  2. constructor 主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数。
  3. 如果我们修改了原来的原型对象，给原型对象赋值的是一个对象，则需要手动的利用 constructor 这个属性指回原来的构造函数。
	function Star(uname, age){
        this.uname = uname
        this.age = age
    }
    // 如果我们修改了原来的原型对象 给原型对象赋值的是一个对象 则需要手动的利用 constructor 这个属性指回 原来的构造函数
    Star.prototype = {
        constructor: Star,
        sing(){
            console.log('I can sing')
        },
        movie(){
            console.log('I can perform in a film')
        }
    }
    let a = new Star('毛不易', 20)
    let b = new Star('水木年华', 25)
    console.log(Star.prototype)
    console.log(a.__proto__)
    console.log(Star.prototype === a.__proto__)
    console.log(Star.prototype.constructor)
    console.log(a.__proto__.constructor)

在这里插入图片描述

如果不在 Star 原型对象上添加：constructor: Star，就不会有构造函数。

在这里插入图片描述

  1. 构造函数、实例、原型对象三者之间的关系
    在这里插入图片描述
6、原型链
  1. 只要有对象就有 __proto__ 原型。
    在这里插入图片描述
	function Star(uname, age){
        this.uname = uname
        this.age = age
    }
    Star.prototype.sing = function(){
        console.log('I can sing')
    }
    let a = new Star('毛不易', 20)
    console.log(a.__proto__ === Star.prototype) //true
        
    // 1.只要有对象就有 __proto__ 原型 指向原型对象
    console.log(a.__proto__) //指向Star.prototype
        
    // 2.我们Star原型对象里面的__proto__原型指向的是 Object.prototype
    console.log(Star.prototype.__proto__) //指向Object.prototype

    // 3.我们Object.prototype 原型对象里面的__proto__原型 指向为 null
    console.log(Object.prototype.__proto__) //指向 null

在这里插入图片描述

7、JavaScript 成员的查找机制（规则）
  1. 一层一层的查找，如果多层都含有某个属性，会就近选择。

第一层

	function Star(uname, age){
        this.uname = uname
        this.age = age
    }
    Star.prototype.sing = function(){
        console.log('I can sing')
    }
    // Star.prototype.sex = '女'
    // Object.prototype.sex = '不详'
    let a = new Star('张三', 20)
    a.sex = '男'
    console.log(a.sex) //男

第二层

	function Star(uname, age){
        this.uname = uname
        this.age = age
    }
    Star.prototype.sing = function(){
        console.log('I can sing')
    }
    Star.prototype.sex = '女'
    // Object.prototype.sex = '不详'
    let a = new Star('张三', 20)
    // a.sex = '男'
    console.log(a.sex) //女

第三层

	function Star(uname, age){
        this.uname = uname
        this.age = age
    }
    Star.prototype.sing = function(){
        console.log('I can sing')
    }
    // Star.prototype.sex = '女'
    Object.prototype.sex = '不详'
    let a = new Star('张三', 20)
    // a.sex = '男'
    console.log(a.sex) //不详

多层用最近的一层

	function Star(uname, age){
        this.uname = uname
        this.age = age
    }
    Star.prototype.sing = function(){
        console.log('I can sing')
    }
    Star.prototype.sex = '女'
    Object.prototype.sex = '不详'
    let a = new Star('张三', 20)
    a.sex = '男'
    console.log(a.sex) //男
8、原型对象中的 this 指向
  1. 构造函数里面 this 指向的是对象实例。
  2. 原型对象函数里面的 this 指向的是实例对象。
	function Star(uname, age){
        this.uname = uname
        this.age = age
    }
    let that
    Star.prototype.sing = function(){
        console.log('I can sing')
        that = this
    }
    
    let a = new Star('张三', 20)
    // 1.构造函数里面 this 指向的是对象实例a
    a.sing() //I can sing
    // 2.原型对象函数里面的this 指向的是实例对象a
    console.log(that === a) //true
9、扩展内置对象
  1. 可以通过原型对象，对原来的内置对象进行扩展自定义的方法。
	// 原型对象的应用 扩展内置对象方法
    console.log(Array.prototype)

    Array.prototype.sum = function() {
        let sum = 0
        for(let i = 0; i < this.length; i++){
            sum += this[i]
        }
        return sum
    }
    let arr = [1, 2, 3]
    console.log(arr.sum())
    console.log(Array.prototype)

    let arr1 = new Array(2, 3, 4)
    console.log(arr1.sum())

在这里插入图片描述

  1. 数组和字符串内置对象不能给原型对象覆盖操作 Array.prototype = {}，只能是 Array.prototype.xxx = function() {} 的方式。
	Array.prototype = {
        sum(){
            let sum = 0
            for(let i = 0; i < this.length; i++){
                sum += this[i]
            }
            return sum
        }
    }
    let arr = [1, 2, 3]
    console.log(arr.sum())
    console.log(Array.prototype)

    let arr1 = new Array(2, 3, 4)
    console.log(arr1.sum())

在这里插入图片描述

前端杂货铺
关注
专栏目录
ES6——Proxy
Rookie_lei的博客
07-29 49
get方法用于拦截某个属性的读取操作，可以接受三个参数，依次为目标对象、属性名和 proxy 实例本身（严格地说，是操作行为所针对的对象），其中最后一个参数可选。apply方法可以接受三个参数，分别是目标对象、目标对象的上下文对象（ this ）和目标对象的参数数组。newTarget ：创造实例对象时， new 命令作用的构造函数（下面例子2中的 p ）apply方法拦截函数的调用、 call 和 apply 操作。construct方法返回的必须是一个对象，否则会报错。args ：构造函数的参数对象。
es6—— 继承 ——类的 prototype 属性和__proto__属性（原型链）
chengzhangdewo的博客
09-28 438
大多数浏览器的 ES5 实现之中，每一个对象都有__proto__属性，指向对应的构造函数的prototype属性。Class 作为构造函数的语法糖，同时有prototype属性和__proto__属性，因此同时存在两条继承链。 （1）子类的__proto__属性，表示构造函数的继承，总是指向父类。 （2）子类prototype属性的__proto__属性，表示方法的继承，总是指向父类的prototype属性。 class A { } class B extends A { } B.__...
JavaScript ES6的构造函数语法
weixin_46236141的博客
04-13 606
ES5的构造函数有一些问题 最大的问题，就是定义 prototype 是在函数之外定义的 调用构造函数，生成实例化对象，一定要在定义 prototype 之后 否则生成的实例化对象，只有属性没有函数方法 ES6中，新增语法形式 class 类 是一种新的定义构造函数的语法 作用和原理与ES5语法完全相同 只是语法格式和书写方式，不同 实例 ES5的构造函数语法 // 如果先调用构造函数,只有属性没...
ES6构造函数
mitrichev86的专栏
06-22 261
ES6构造函数
ES6 构造函数
qq_42532476的博客
05-12 800
es6 构造函数
ES6新增的构造函数方法
宫崎骏爷爷的捣蛋野孩子
12-04 590
ES6新增的构造函数方法 Array构造函数有两个ES6新增的用于创建数组的静态方法：from()和of()。 from()用于将类数组结构转换为数组实例，而of()用于将一组参数转换为数组实例。 一、Array.of Array.of用于将参数依次转化为数组中的一项，然后返回这个新数组，而不管这个参数是数字还是其它。它基本上与Array构造器功能一致，唯一的区别就在单个数字参数的处理上。如下： Array.of(6.0); Array(6.0); 执行结果： 参数为多个，或单个参数不是数字时，Ar
es6为类创建多个构造函数
asing1elife's blog
09-23 4629
虽然ES6之后可以实现JavaScript创建Class，但自身并不提供函数重载，所以无法直接创建多个构造函数 更多精彩 更多技术博客，请移步 asing1elife’s blog 解决 原理则是对一个构造函数的传值进行类型判断，从而实现根据类型的不同调用不同的构造函数方法体 export default class User { constructor (obj) { ...
【ES6 & JS】构造函数、原型和原型链
weixin_42337982的博客
07-18 543
构造函数、原型与原型链
ES6——Promise函数
ling_xy的博客
10-05 418
文章目录一、三个状态二、基本用法1.举例2.使用原生Ajax3.图片异步加载（懒加载）三、then（）四、Promise.all()五、Promise.race()六、Promise.resolve()七、Promise.reject()八、Generator 函数与 Promise 的结合 异步编程解决方案 一、三个状态 1.promise内部状态 不受外界影响，由异步编程结果决定 pending进行中 fulfilled成功 rejected失败 2.promise中的状态 一旦发生变化不会再修改
ES6——————10.13~11.5
Z933143298的博客
10-07 168
ES6：let，const，变量的解构赋值，模板字符串，简化对象写法，箭头函数，函数参数的默认值设置，rest参数，扩展运算符，Symbol新数据类型，迭代器，生成器，set，
ES6学习笔记（四）——构造函数&数据常用函数
最新发布
weixin_56370772的博客
10-26 399
1.1创建对象三种方式。
内置构造函数（es6）
helongzhi的博客
07-09 526
内置构造函数（es6）
ES6构造函数 新增语法形式 class 类 和 ES5构造函数语法
kokkoko的博客
04-19 174
ES5 和 ES6 语法的对比 ES5的构造函数有一些问题，最大的问题就是定义 prototype 是在函数之外定义的；调用构造函数，生成实例化对象，只有属性没有函数方法； ES6中，新增语法形式 class 类： 是一种新的定义构造函数的语法，作用和原理与ES5语法完全相同，只是语法格式和书写方式不同。 ...
ES6 面向对象之构造函数
m0_62407740的博客
01-19 382
1.概念 在js中，使用new来新建一个对象时， 实际上是调用了一次constructor函数来完成对象初始化操作，而完成对象初始化操作的函数，称为构造函数。 注意：构造函数自己默认返回实例对象. 如果将方法定义在类中，实际是放在构造函数原型对象之上。 2. 作用 接收传递的参数 返回实例对象 class Person { constructor(name, age, job, specialty) { this.na..
es6 类 和构造函数
dhre71512的博客
04-10 272
转载于:https://www.cnblogs.com/kunkunsiwa/p/10683587.html
JS进阶之面向对象ES6-构造函数与原型
欢迎访问我的主页：https://www.bookbook.cc
11-12 8734
构造函数、原型 ES6类的本质 构造函数与原型 实现继承
ES6 生成器函数
哈哈绝的博客
11-02 413
ES6 生成器函数
es6构造函数
weixin_39936078的博客
09-17 88
es6中 class语法只是简单地替换了构造函数constructor的写法： class SpaceShuttle { constructor(targetPlanet) { this.targetPlanet = targetPlanet; } } const zeus = new SpaceShuttle('Jupiter'); 应该注意class关键字声明了一个新的函数 了解构造函数 JS 中构造函数和普通函数的区别_灵灵7的博客-CSDN博客_构造函数1、构...
ES6的类详解与对比ES5构造函数
"ES6的类特性与构造函数、静态函数和静态方法的解析" 在JavaScript的世界里，ES6（ECMAScript 2015）引入了一种新的语法——`class`，它使得面向对象编程的表达更加简洁和直观。尽管`class`关键字在很大程度上是ES5...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端杂货铺

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值