JavaScript原型实例分析(javascript,开发技术)

时间:2024-04-17 04:06:52 作者 : 石家庄SEO 分类 : 开发技术
  • TAG :

    JavaScript%E5%8E%9F%E5%9E%8B%E5%AE%9E%E4%BE%8B%E5%88%86%E6%9E%90

JS中声明函数的三种方式

1.function 函数名(){}声明

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

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

new Function 来创建

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

并且知道:

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

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

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

知道以下知识点:

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

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

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

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

得出的结论是:

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

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

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

JavaScript原型实例分析

知道知识点:

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

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

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

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

[[Prototype]]:Object

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

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

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

对应下图的序号3

JavaScript原型实例分析

记住:

Object是各个对象的根

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

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

看代码

注意:

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

2. 函数有prototype

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

看下面代码

注意上面代码:

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

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

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

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

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

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

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

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

一些更加复杂的情况

1. obj.__proto__指向Object.prototype

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

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

3. Object.__proto__指向Function.prototype

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

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

原型链就是__proto__的终点

本文:JavaScript原型实例分析的详细内容,希望对您有所帮助,信息来源于网络。
上一篇:vue中对象的赋值Object.assign({}, row)方式是什么下一篇:

13 人围观 / 0 条评论 ↓快速评论↓

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18