文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript原型实例分析

2023-06-29 08:33

关注

这篇文章主要讲解了“JavaScript原型实例分析”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript原型实例分析”吧!

先看三个对象

一、构造函数(对象):

JS中声明函数的三种方式

function 函数名(){}声明

匿名函数声明 var foo = function () {}

构造函数声明 var foo = new Function("形参1","形参2","形参3")。任何函数都可以用

new Function 来创建

        function fn1(name,age) {            console.log(`我叫${name},我今年${age}岁`);        }        fn1('小航',19)        // 定义函数的第二种方式        const fn2 = function(name,sex) {            console.log(`我叫${name},性别${sex}`);        }        fn2('小航','男')        fn3('小航','男')        // Function也是一个构造函数        // 上面的方式和下面的fn4声明函数的方式是一致的        const fn4 = new Function('name','age','console.log(`我叫${name},性别${sex}`)')        // 当然还有箭头函数 只是写法变了 和第一种类似        const fn3 = (name, sex) => {            console.log(`我叫${name},性别${sex}`);        }

当我们用函数去创建对象时,如下Fun就是构造函数。fn()是实例对象

        function Fun() {        }        var fn = new Fun()        console.log(fn.__proto__ === Fun.prototype); // true

并且知道:

任何函数,上面的fn fn1 fn2 fn2都是Fun的实例,而Fun也是构造函数Function的实例,Function是JS内置的对象。

看到上面一段代码,Fun.prototype指代/指向的是原型(对象,后面直接称为原型)。

 我们接下来看第二个对象:

 二、实例对象

        function fn1(name,age) {            console.log(`我叫${name},我今年${age}岁`);        }        const obj1 = {            name: '小航',            age: '19'        }

知道以下知识点:

只要用new关键字 + 构造函数生成的对象,就是实例对象

即便没有用new + 关键字,而是用比如字面量创建对象,或者是函数直接 function 函数名() {} 这样声明,生成的也是实例对象,如上面代码 。

 记住重要的知识点:所有的实例对象都有__proto__属性,甚至可以去掉实例,改为所有的对象都有__proto__属性。      

知道如下代码中,fn 是构造函数Fun的实例对象,并且Fun也是构造函数Function的实例对象。

        function Fun() {        }        var fn = new Fun()

得出的结论是:

fn实例对象的__proto__属性指向构造函数Fun的属性prototype【原型】

而Fun的实例对象的__proto__属性也指向构造函数的Function的prototype【原型】              备注:在这里,prototype既是Fun的属性,而Fun.prototype也是最终的一个地方,目的地,这个目的地叫作原型对象。

        // 1. fn是Fun()构造函数的实例 实例对象的__proto__属性都会指向自身构造函数的prototype属性        function Fun() {        }        var fn = new Fun()        console.log(fn.__proto__ === Fun.prototype); // true        // 2. Fun函数是Function构造函数的实例 因此Fun的__proto__和构造函数Function指向同一个地方        console.log(Fun.__proto__ === Function.prototype); // true

第一个console对应下图的序号1,第二个console对应下图的序号4

JavaScript原型实例分析

三、 原型对象:

知道知识点:

所有的函数都有一个原型对象。比如函数Function,它有原型对象Function.prototype。也有说法叫Function.prototype 为 函数Function的伴生对象,意思是函数Function一创建,就有一个陪伴它一起创建的对象叫Function.prototype。而Function自己的身上,又有一个属性叫作prototype,这个属性指向了它的伴生对象。

函数的原型对象身上有一个属性,叫作,constructor,它能够指回构造函数。就好像,构造函数Function通过属性prototype指向了原型对象Function.prototype,而原型对象Function.prototype通过自身的constructor属性指回去。

 比如下面的,可以自行验证。

        function fn() {        }        console.log(fn.prototype);        console.log(fn.prototype.constructor === fn); // true

函数的原型对象身上还有一个属性,叫作__proto__属性。浏览器打印出来现在长这样,

[[Prototype]]: Object

原型当中的__proto__指向父类的原型对象prototype,比如下面的代码

下面的意思是函数Person的prototype,这是一个原型对象,它的__proto__属性指向Object父类的prototype,Function也是类似。为什么是这样?

因为既然Person.prototypeFunction.prototype都叫作原型对象,都是对象,那么本质都是通过new Object创建的,都是构造函数Object的实例,因此它们也是实例对象,身上也有__proto__属性指向Object父类。

    function Person() {    }    console.log(Person.prototype.__proto__ === Object.prototype); // true    console.log(Function.prototype.__proto__ === Object.prototype); // true

对应下图的序号3

JavaScript原型实例分析

记住:

Object是各个对象的根

再看三个属性:

一、prototype:

记住这个属性是函数独有的

下面的代码,fn有prototype,Fun构造函数有prototype,Function下面没写出来,但是也有prototype。

看代码

        var fn55 = new Function('age', 'sex', 'console.log(`今年${age}性别${sex}`)')        console.log(fn55.prototype);        console.log(fn55.__proto__ === Function.prototype); // true

注意:

上面的fn55是通过new Function创建的一个函数,

函数有prototype 

同时fn55也是通过new + Function 创建的一个实例对象, 因此也有__proto__,指向Function构造函数的prototype

看下面代码

        function Fun(name, age) {            this.name = name;            this.age = age        }           var fnn = new Fun('小航', '123')        console.log(fnn.prototype); // undefined

注意上面代码:

上面是通过new + Fun 创建了一个实例对象

这里是通过构造函数Fun创建了一个对象fnn,而fnn并不是函数,因此并没有prototype原型对象

二、__proto__

记得万物都是对象 因此万物都有__proto__

构造函数的创建的实例对象,有__proto__,指向构造函数的prototype

        function Person(name,age) {            this.name = name            this.age= age        }        Person.prototype.sayHello = function() {            console.log(this.name);        }        const obj1 = {            name: '小航',            age: '19'        }        const obj2 = new Object()        obj2.name = '焦迈奇'        obj2.age = '19'        console.log(obj1);        console.log(obj2);        console.log(Person.prototype);        const person1 = new Person('小红', 19)        const person2 = new Person('小明', 20)        console.log(person1.__proto__);        console.log(person2.__proto__);        console.log(Person.prototype === person1.__proto__);// true        console.log(Person.prototype === person2.__proto__);// true        console.log(Object.prototype === obj1.__proto__);   // true        console.log(Object.prototype === obj2.__proto__);        // true

函数实例有__proto__,也指向构造函数Function

        // 2. 创建函数的几种方式        // 定义函数的第一种方式        function fn1(name,age) {            console.log(`我叫${name},我今年${age}岁`);        }        fn1('小航',19)        // 定义函数的第二种方式        const fn2 = function(name,sex) {            console.log(`我叫${name},性别${sex}`);        }        fn2('小航','男')        // 或者箭头函数        const fn3 = (name, sex) => {            console.log(`我叫${name},性别${sex}`);        }        fn3('小航','男')        // 这三个函数的__proto__等于构造函数Function的prototype        // Function也是一个构造函数        // 上面的三种方式本质和下面的fn4声明函数的方式是一致的        // 定义函数的第三种方式        const fn4 = new Function('name','age','console.log(`我叫${name},性别${sex}`)')        // console.log(Function.prototype === fn1.__proto__); // true        // console.log(Function.prototype === fn2.__proto__); // true        // console.log(Function.prototype === fn3.__proto__); // true        // console.log(Function.prototype === fn4.__proto__); // true

function Object和 function Function 都是构造函数Function的实例,因此也有__proto__

        console.log(Object.__proto__ === Function.prototype);         // true        console.log(Function.__proto__ === Function.prototype);        // true

原型对象也是对象,因此也有__proto__

        function Person() {        }        console.log(Person.prototype.__proto__ === Object.prototype); // true        console.log(Function.prototype.__proto__ === Object.prototype); // true

三、constructor属性

每一个原型对象身上,才有constructor属性

        function fn() {        }        console.log(fn.prototype);        console.log(fn.prototype.constructor === fn); // true        console.log(Function.prototype.constructor === Function); // true        console.log(Object.prototype.constructor === Object);

一些更加复杂的情况

console.log(obj.__proto__.constructor.__proto__.__proto__.__proto__=== null); // null

obj.__proto__指向Object.prototype

Object.prototype.constructor就是指向Object本身

备注:Object也是构造函数也是Function的实例对象 因此下面Object也有__proto__

Object.__proto__指向Function.prototype

Function.prototype.__proto__指向什么?这个就是[原型对象也是对象]原型对象的__proto__指向什么?指向的是父类的prototype也就是Object.prototype

Object.prototype指向什么,就是原型链的终点null 可以下去自行验证

原型链

原型链就是__proto__的终点

感谢各位的阅读,以上就是“JavaScript原型实例分析”的内容了,经过本文的学习后,相信大家对JavaScript原型实例分析这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯