Bootstrap

js之构造函数

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

;