js 学习心得（构造函数）

最新推荐文章于 2021-02-28 21:11:58 发布

Coni_yew

最新推荐文章于 2021-02-28 21:11:58 发布

阅读量209

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Coni_yew/article/details/112506123

版权

创建一个构造函数，主要用于专门创建某一类对象，

构造函数就是一个普通的函数，创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写

二者主要的区别就是调用方式的不同，调用构造函数时需要使用new关键字；

构造函数的执行流程：

1、调用构造函数时，立刻创建一个新的对象

2、将新建的对象设置为函数中的this，也就是在构造函数中，this跟新建的对象是一个东西

3、逐行执行构造函数中的代码

4、将新建的对象作为返回值返回

使用构造函数构造的对象是该类的实例，使用instanceof 可以检查一个对象是否是一个类的实例。

语法为：对象 instanceof 构造函数

如果是，则返回true，否则返回false

所有的对象都是Object的后代

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<script type="text/javascript">
    function Person(name,age,gender){
        this.name=name;
        this.age=age;
        this.gender=gender;
        this.sayName=function fun(){
            console.log(this.name);
        }
    }
    var per1 = new Person("周明",18,"男");
    var per2 = new Person("lily",19,"女");
    console.log(per1.sayName==per2.sayName);
</script>  
</head>
<body>
    
</body>
</html>

在person的构造函数中，为每一个对象都添加了一个sayName方法，目前我们的方法是在构造函数内部创建的，也就是构造函数每执行一次就会创建一个新的sayName方法

但是如果将sayName的方法定义到全局中，则无论构造函数执行多少次，sayName的方法都只执行一次。但是不同的对象调用该方法时依然输出该对象对应的名字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<script type="text/javascript">
    function Person(name,age,gender){
        this.name=name;
        this.age=age;
        this.gender=gender;
        this.sayName=fun;
    }
    function fun(){
            console.log(this.name);
        }
    var per1 = new Person("周明",18,"男");
    var per2 = new Person("lily",19,"女");
    per1.sayName();
    per2.sayName();
    console.log(per1.sayName==per2.sayName);
</script>  
</head>
<body>
    
</body>
</html>

但是将该方法定义在全局作用域中，会污染全局的命名空间，还非常的不安全（即可能会有别人用同样的名字为函数命名）。

原型（prototype）

我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype，这个属性对应着一个对象，也就是我们所谓的原型对象。原型对象就相当于一个公共区域，所有同一个类的实例都可以访问到这个原型对象（所以我们可以将对象中共有的内容，统一设置到原型对象中）这样即不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具备这些属性和方法了。

1、如果函数作为普通函数调用，prototype没有任何作用；

2、当函数以构造函数形式调用时，他所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，我们可以通过__proto__来访问该属性。

当我们访问对象的一个属性或者方法时，他会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用

比如以上图中的示例，mc,mc2,mc3都是MyClass的实例，他们都有一个隐含的属性指向原型对象，此时在mc中有属性a，就不会再去原型中寻找属性a；

所以Person类的sayName方法可以改为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<script type="text/javascript">
    function Person(name,age,gender){
        this.name=name;
        this.age=age;
        this.gender=gender;
    }
    //向Person类的原型中添加方法，保证该方法的安全性
    Person.prototype.sayName = function fun(){
            console.log(this.name);
        }
    var per1 = new Person("周明",18,"男");
    var per2 = new Person("lily",19,"女");
    per1.sayName();
    per2.sayName();
    console.log(per1.sayName==per2.sayName);
</script>  
</head>
<body>
    
</body>
</html>

使用in可以检查对象中是否含有某个属性，如果对象中没有但是原型中有，也会返回true（console.log("name" in per))，

所以可以使用对象的hasOwnProperty（）来检查对象自身中是否含有该属性(console.log(per.hasOwnproperty("name")),只有对象自身含有该属性，才会返回true；

原型对象也是对象，所以他也有原型（一般情况下，一个对象的原型是Object，而Object的原型的原型的值是null。）

所以

document.write(per1.__proto__.__proto__.__proto__);

输出为：

寻找hasOwnProperty是哪个对象的方法（也就是顺着原型链向上寻找，直到找到为止）

document.write(per1.hasOwnProperty("hasOwnProperty")+"</br>");
document.write(per1.__proto__.hasOwnProperty("hasOwnProperty")+"</br>");
document.write(per1.__proto__.__proto__.hasOwnProperty("hasOwnProperty")+"</br>");

toString

当我们直接在页面中打印一个对象时，实际上是输出的对象的toString（）方法的返回值，toString（）是对象的原型的原型中的方法

所以当我们直接在页面中打印一个对象时,他的输出为[object Object]

如果我们希望改变输出则可以通过改变原型中的toString（）函数实现；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<script type="text/javascript">
    function Person(name,age,gender){
        this.name=name;
        this.age=age;
        this.gender=gender;
    }
    Person.prototype.toString=function fun(){
        return "Person[name:"+this.name+" age:"+this.age+" gender:"+this.gender+"]";
    }
    var per1=new Person("liming",21,"男");
    var per2=new Person("wanghao",21,"男");
    document.write(per1+"</br>");
    document.write(per2+"</br>");
   

</script>
</head>
<body>
    
</body>
</html>

输出结果为：

并且语句改为

    document.write(per1.toString()+"</br>");
    document.write(per2.toString()+"</br>");

输出结果不变

垃圾回收

在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，我们不需要也不能进行垃圾回收的操作，我们需要做的只是将不再使用的对象设置为null即可。

Coni_yew

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js 学习心得（构造函数）

创建一个构造函数，主要用于专门创建某一类对象，构造函数就是一个普通的函数，创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写二者主要的区别就是调用方式的不同，调用构造函数时需要使用new关键字；构造函数的执行流程：1、调用构造函数时，立刻创建一个新的对象2、将新建的对象设置为函数中的this，也就是在构造函数中，this跟新建的对象是一个东西3、逐行执行构造函数中的代码4、将新建的对象作为返回值返回使用构造函数构造的对象是该类的实例，使用instanceof .
复制链接

扫一扫