js之构造函数

最新推荐文章于 2024-01-31 09:21:46 发布

yuanxiaoh

最新推荐文章于 2024-01-31 09:21:46 发布

阅读量304

点赞数 1

分类专栏：构造函数文章标签： javascript 开发语言前端学习

本文链接：https://blog.csdn.net/yuanxiaoh/article/details/131281605

版权

构造函数专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.什么是构造函数

主要用来创建对象，也叫实例化对象

2.场景及特点

场景：创建多个属性或方向相同的对象时使用

特点：命名需要大写，用new关键字执行

使用new调用函数的过程叫实例化(创建对象)

构造函数不需要return就可以返回创建的对象(对return不起作用)

new出来的对象都是独立存在的

每次new构造函数时，就会在内存空间中新储存一个相同的方法，所以构造函数用多了会浪费内存空间

3.new操作做了什么事

1 创建空对象

2 this指向创建的这个对象

3 通过this把属性和方法添加到这个对象上

4 返回这个对象上(类似return)

4.构造函数的this指向

构造函数中的this指向实例化对象

如果想要拿到方法中的this需要先调用,构造函数中方法中的this指向实例化对象

原型对象上的方法中this指向实例化对象

如果构造函数内和原型对象上有相同的方法时，会执行构造函数上的，原因是就近原则查找方式

 <script>
        var that;
        function Person(name, age) {
            this.name = name
            this.age = age
            this.study = function () {
                console.log('我爱敲代码')
            
            }
        }
        Person.prototype.study=function () {
                console.log('我爱敲代码1111111111')
                that=this

            }
        
        var wdl = new Person('hhhh', 20)
        wdl.study()
       console.log(wdl===that)
    </script>

5.原型对象prototype

prototype属性：所有对象都可以使用存在构造函数中prototype属性里的方法

js规定每一个构造函数都有一个prototype属性(只要创建了构造函数就会自动有prototype属性)

prototype属性也称为对象,存在prototype里面的方法和属性都属于这个构造函数

场景：可以把相同的方法，直接写在prototype对象上，这样创建出来的对象都可以使用到

构造函数是通过原型分配的函数，也就是说prototype也叫做原型对象

prototype中的this

6.对象原型proto

__proto__:对象原型，只要构造函数在prototype里存储方法或属性时，

创建的对象都可以通过对象上的__proto__这个属性访问到

也就是说__proto__是对象上的属性，

在现在的浏览器上显示的是[[prototype]],他就代表是__proto__ ，

以前浏览器显示的是__proto__，但__proto__是非标准的写法

对象中的__proto__和构造函数中的prototype相等

7.constuctor构造函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
// constructor 构造函数
/* 
对象原型（__proto__）和原型对象（prototype）他们都有一个constructor属性，constructor属性也叫构造函数，
而且它指向构造函数本身（Person）
场景：用于查找该对象引用的是哪个构造函数
*/

function Person(name, age) {
            this.name = name
            this.age = age
           
        }
        // 直接给原型对象上添加方法时不会出现找不到constructor构造函数（能指回原来的构造函数）
        // Person.prototype.study=function () {
        //         console.log('我爱敲代码')

        //     }

       /* 
        如果有多个对象方法，可以采用给原型对象赋值的方式，但会覆盖原来的原型对象的内容，
           就会出现constructor不再指向原来的构造函数，我们需要通过添加constructor指向原来的构造函数
        */
        Person.prototype={  //这种写法改变了prototype的构造函数指向 ，因为是直接给prototype赋值了一个对象
            constructor:Person,//手动指回原来的构造函数
            study:function(){
                console.log('我爱学习')
            },
            speak:function(){
                console.log('我还爱说话')
            }
        }
        var wdl = new Person('王多磊', 20)
    //   console.log(Person.prototype.constructor===Person) //true
    //   console.log(wdl.__proto__.constructor===Person)  //true
    console.log(Person.prototype)
    
    </script>
</body>
</html>

8.原型链（重要）

所有的对象上都有原型对象（prototype）,所有的原型对象上都有对象原型（__proto__）,那种查找方式就是原型链（一级一级朝上查找）

其实构造函数就是在创建对象构造函数的终极boss是Object

如果Object身上都没有想要找的方法，那就会返回null

yuanxiaoh

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js之构造函数

主要用来创建对象，也叫实例化对象2.场景及特点场景：创建多个属性或方向相同的对象时使用特点：命名需要大写，用new关键字执行使用new调用函数的过程叫实例化(创建对象)构造函数不需要return就可以返回创建的对象(对return不起作用)new出来的对象都是独立存在的每次new构造函数时，就会在内存空间中新储存一个相同的方法，所以构造函数用多了会浪费内存空间。
复制链接

扫一扫