js属性,封装性,prototype综合解析

原创作品,转载请注明来源,sogeisetsu,我的csdn上也有这篇文章csdn

js属性,封装性,prototype综合解析


用实例来解释以下js的公有属性,静态属性,实例属性,prototype和封装性


下面是我在写博客的源代码,您可以先不要看他,先看下面的文字部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js属性</title>
    <script>
        //先构造一个函数
        //先搞清楚原型链
        function qust() {
            this.name="university";//这是公有属性
            this.age=12;
            //这是共有方法
            this.run=function () {
                console.log("have ran");
            };
            let age="12";//这是私有属性
            //这是私有方法
            function go() {
                console.log("have gone");
            }
        }
        //先创建一个实例对象
        let shili=new qust();
        //构造函数的原型对象通过prototype来调用
        console.log(qust.prototype);//打印原型对象,打印结果是object
        //注意,这个时候还没有改变原型对象
        console.log(qust.prototype.constructor);//打印原型对象的constructor
        /*打印结果是如下
        ƒ qust() {
            this.name="university";//这是公有属性
            this.age=12;
            //这是共有方法
            this.run=function () {
                console.log("have ran");
            };
         …
        * */
        console.log(qust);//打印构造函数
        /*结果如下
        * ƒ qust() {
            this.name="university";//这是公有属性
            this.age=12;
            //这是共有方法
            this.run=function () {
                console.log("have ran");
            };
         …*/
        console.log(qust === qust.prototype.constructor);//true,原型对象的constructor指向构造函数
        //但是,如果我们修改了qust.prototype(原型对象),qust.prototype.constructor还指向构造函数吗?
        qust.prototype={//prototype保存一些构造函数共有的属性,来节省内存
            type:"人类",
            typerun:function () {
                console.log('人类');
            }
        };
        console.log(qust === qust.prototype.constructor);//false,不相等了。
        // 注意点: 为了不破坏原有的关系, 在给prototype赋值的时候, 需要在自定义的对象中手动的添加constructor属性, 手动的指定需要指向谁
        qust.prototype={//prototype保存一些构造函数共有的属性,来节省内存
            constructor:qust,//不带括号
            setype:"人类",
            typerun:function () {
                console.log('人类');
            }
        };
        console.log(qust === qust.prototype.constructor);//true
        /*
        1.对象中__proto__组成的链条我们称之为原型链
        2.对象在查找属性和方法的时候, 会先在当前对象查找
          如果当前对象中找不到想要的, 会依次去上一级原型对象中查找
          如果找到Object原型对象都没有找到, 就会报错
         */
        // 放个图就明白了
        let shi=new qust();//由于修改了一些东西,所以新创建一个对象
        console.log(shi.setype);//打印在原型对象中定义的值,结果是人类
        shi.setype="新人类";
        console.log(shi.setype);//新人类
        console.log(shi.__proto__);/*{setype: "人类", constructor: ƒ, typerun: ƒ}*/
        console.log(shi.__proto__.setype);//人类
        console.log(qust.prototype.setype);//人类
        console.log(shi.__proto__===qust.prototype);//true
        // 注意点: 在给一个对象不存在的属性设置值的时候, 不会去原型对象中查找, 如果当前对象没有就会给当前对象新增一个不存在的属性
        /*
                1.在JavaScript中属性和方法分类两类
                1.1实例属性/实例方法
                在企业开发中通过实例对象访问的属性, 我们就称之为实例属性
                在企业开发中通过实例对象调用的方法, 我们就称之为实例方法
                1.2静态属性/静态方法
                在企业开发中通过构造函数访问的属性, 我们就称之为静态属性
                在企业开发中通过构造函数调用的方法, 我们就称之为静态方法
                */
        //先看一下原先设置的qust
        /*function qust() {
            this.name="university";//这是公有属性
            this.age=12;
            //这是共有方法
            this.run=function () {
                console.log("have ran");
            };
            let age="12";//这是私有属性
            //这是私有方法
            function go() {
                console.log("have gone");
            }
        }
        * */
        //上面的属性或方法都是通过创建实例对象才能访问或调用,所以我们叫他实例属性或实例方法
        qust.school="qust";//这是一个静态属性,通过构造函数来访问
        console.log(qust.school);//qust
        //定义一个方法
        qust.getschool=function () {
            console.log("qust is my school");
        }//这是通过构造函数访问的方法,我们称其为静态方法
        qust.getschool()//调用静态方法
        //qust is my school
        //封装性
        //防止混乱构造一个新函数newqust
        function newqust() {
            this.name="university";//这是公有属性
            this.age=12;
            //以下是修改内容
            let myage=19;//设置一个私有年龄,这是在函数外面无法修改的
            this.setnewage=function (newage) {
              if(newage>=0){
                  myage=newage;
              }
            };
            //我们还需要一个来调用年龄
            this.getage=function () {
              return myage;
            };
            //这是共有方法
            this.run=function () {
                console.log("have ran");
            };
            let age="12";//这是私有属性,只能在该函数里访问,在外无法访问,这就为我们的封装性提供了可能
            //这是私有方法
            function go() {
                console.log("have gone");
            }
        }
        //试一下调用私有属性
        console.log(newqust.age);//undefined
        /*
        * 假设一个场景,让用户设置自己的年龄,年龄吗肯定大于零的,但是通过公有属性却而已随意设置*/
        let newshili=new newqust();
        newshili.age=-2;
        console.log(newshili.age);//-2,这是荒诞的
        //所以需要修改
        newshili.setnewage(15);
        console.log(newshili.getage());//15

    </script>
</head>
<body>

</body>
</html>

先搞清楚原型链,prototype

先构造一个函数

function qust() {
            this.name="university";//这是公有属性
            this.age=12;
            //这是共有方法
            this.run=function () {
                console.log("have ran");
            };
            let age="12";//这是私有属性
            //这是私有方法
            function go() {
                console.log("have gone");
            }
        }

先创建一个实例对象来调用构造函数中的属性

 let shili=new qust();

构造函数的原型对象通过prototype来调用

console.log(qust.prototype);//打印原型对象,打印结果是object

注意,这个时候还没有改变原型对象

console.log(qust.prototype.constructor);//打印原型对象的constructor

qust.prototype.constructor是指向构造函数qust的。

所以👇

console.log(qust === qust.prototype.constructor);//true

但是,如果我们修改了qust.prototype(原型对象),qust.prototype.constructor还指向构造函数吗?

修改qust.prototype

 qust.prototype={
            type:"人类",
            typerun:function () {
                console.log('人类');
            }
        };
console.log(qust === qust.prototype.constructor);//false,不相等了。

那怎么办呢?

注意点: 为了不破坏原有的关系, 在给prototype赋值的时候, 需要在自定义的对象中手动的添加constructor属性, 手动的指定需要指向谁

就像这样👇

        qust.prototype={//prototype保存一些构造函数共有的属性,来节省内存
            constructor:qust,//👈不带括号,注意修改的就是这里
            setype:"人类",
            typerun:function () {
                console.log('人类');
            }
        };
 console.log(qust === qust.prototype.constructor);//true

我们之前设置了一个对象shili,还记得吗?

我们是这样设置的,👇

 let shili=new qust();

shili是一个实例对象
实例对象的__proto__指向构造函数的原型对象qust.prototype

console.log(shili.__proto__===qust.prototype);//true
1.对象中__proto__组成的链条我们称之为原型链
2.对象在查找属性和方法的时候, 会先在当前对象查找
如果当前对象中找不到想要的, 会依次去上一级原型对象中查找
如果找到Object原型对象都没有找到, 就会报错
放个图就明白了

 let shi=new qust();//由于修改了一些东西,所以新创建一个对象
        console.log(shi.setype);//打印在原型对象中定义的值,结果是人类
        shi.setype="新人类";
        console.log(shi.setype);//新人类
        console.log(shi.__proto__);/*{setype: "人类", constructor: ƒ, typerun: ƒ}*/
        console.log(shi.__proto__.setype);//人类
        console.log(qust.prototype.setype);//人类
        console.log(shi.__proto__===qust.prototype);//true

注意点: 在给一个对象不存在的属性设置值的时候, 不会去原型对象中查找, 如果当前对象没有就会给当前对象新增一个不存在的属性

实例属性和静态属性

1.在JavaScript中属性和方法分类两类
1.1实例属性/实例方法
在企业开发中通过实例对象访问的属性, 我们就称之为实例属性
在企业开发中通过实例对象调用的方法, 我们就称之为实例方法
1.2静态属性/静态方法
在企业开发中通过构造函数访问的属性, 我们就称之为静态属性
在企业开发中通过构造函数调用的方法, 我们就称之为静态方法

先看一下原先设置的qust

function qust() {
            this.name="university";//这是公有属性
            this.age=12;
            //这是共有方法
            this.run=function () {
                console.log("have ran");
            };
            let age="12";//这是私有属性
            //这是私有方法
            function go() {
                console.log("have gone");
            }
        }

👆上面的属性或方法都是通过创建实例对象才能访问或调用,所以我们叫他实例属性或实例方法

就像这样

 let shi=new qust();//由于修改了一些东西,所以新创建一个对象
        console.log(shi.setype);//打印在原型对象中定义的值,结果是人类

先设置一个静态属性
qust.school="qust";//这是一个静态属性,通过构造函数来访问

来调用它
console.log(qust.school);//qust

//定义一个方法
qust.getschool=function () {
   console.log("qust is my school");
}//这是通过构造函数访问的方法,我们称其为静态方法


qust.getschool()//调用静态方法返回qust is my school

封装性

防止混乱构造一个新函数newqust

function newqust() {
            this.name="university";//这是公有属性
            this.age=12;
            //这是共有方法
            this.run=function () {
                console.log("have ran");
            };
            let age="12";//这是私有属性,只能在该函数里访问,在外无法访问,这就为我们的封装性提供了可能
            //这是私有方法
            function go() {
                console.log("have gone");
            }
        }

试一下调用私有属性

  console.log(newqust.age);//undefined,无法调用

这是私有属性,只能在该函数里访问,在外无法访问,这就为我们的封装性提供了可能

假设一个场景,让用户设置自己的年龄,年龄吗肯定大于零的,但是通过公有属性却而已随意设置

let newshili=new newqust();
        newshili.age=-2;
        console.log(newshili.age);//-2,这是荒诞的

所以需要修改,newqust修改如下

 function newqust() {
            this.name="university";//这是公有属性
            this.age=12;
            //以下是修改内容
            let myage=19;//设置一个私有年龄,这是在函数外面无法修改的
            this.setnewage=function (newage) {
              if(newage>=0){
                  myage=newage;
              }
            };
            //我们还需要一个来调用年龄
            this.getage=function () {
              return myage;
            };
            //这是共有方法
            this.run=function () {
                console.log("have ran");
            };
            let age="12";//这是私有属性,只能在该函数里访问,在外无法访问,这就为我们的封装性提供了可能
            //这是私有方法
            function go() {
                console.log("have gone");
            }
        }

可以修改年龄

newshili.setnewage(15);
        console.log(newshili.getage());//15

如果将年龄设置成负值呢?

 newshili.setnewage(-5);
        console.log(newshili.getage());//返回19
posted @ 2019-11-01 14:45  sogeisetsu  阅读(910)  评论(0编辑  收藏  举报