热门搜索 :
考研考公
您的当前位置:首页正文

14-构造函数模式(拓展)

来源:东饰资讯网

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <title>构造函数模式拓展</title> 
 </head> 
 <body> 
  <script type="text/javascript">

        // 例1
        function Fn1() {
            // this -> f1
            this.x = 100;
            this.getX = function () {
                console.log(this.x);
            }
        }
        Fn();
//        var f1 = new Fn();
        var f1 = new Fn1;
        f1.getX(); // 方法中的this是f1 -> 100
        var ss = f1.getX();
        ss(); // 方法中的this是Window -> undefined

        // 1.在构造函数模式当中,new Fn()执行,如果Fn中不需要传递参数的话,后边的小括号() 可以省略
        // 2.this的问题 : 在类中出现的this.xxx = xxx 中的this都是当前类的实例,而某一个属性值(方法),方法中的this需要看方法执行的时候前边时候有"." 才能知道this是谁


        // 例2
        function Fn2() {
            var num = 10;
            this.x = 100;
            this.getX = function () {
                console.log(this.x);
            }
        }
        Fn();
        var f2 = new Fn2;
        console.log(f2.num); // undefined
        // 类有普通函数的一面 当函数执行的时候 var num 其实只是当前形成的私有作用域中的私有变量而已 他和我们的f1这个实例没有任何关系; 只有this.xxx = xxx 才相当于给f1这个实例增加私有的属性和方法,才和我们的f1有关系...


        // 例3
        function Fn3() {
            this.x = 100;
            this.getX = function () {
                console.log(this.x);
            }
            return {name:"珠峰"};
        }
        Fn();
        var f3 = new Fn3;
        console.log(f3);
        // 在构造函数中 浏览器会默认的把我们的实例返回 (返回的是一个对象数据类型的值);如果我们自己手动写了return返回
        // 返回的是一个基本数据类型的值,当前的实例是不变的 ,例如 return 100; 我们的f1还是当前Fn类的实例
        // 返回的是一个引用数据类型的值,当前的实例会被自己返回的值替换掉


        // 例4
        function Fn4() {
            this.x = 100;
            this.getX = function () {
                console.log(this.x);
            }
        }
        Fn();
        var f4 = new Fn4;
        console.log(f4);
        // 检测摸一个实例是否属于这个类 -> instanceof
        console.log(f1 instanceof Fn); // true
        console.log(f1 instanceof Array); // false
        console.log(f1 instanceof Object) // true 因为所有的实例都是对象数据类型的 而每一个对象数据类型都是Object这个内置类的一个实例,所以f1也是他的一个实例
        // 对于检测数据类型来说 typeof有自己的局限性,不能细分object下的对象 数组 正则
        var a = [];
        console.log(a instanceof Array); // true



        // 例5
        function Fn5() {
            this.x = 100;
            this.getX = function () {
                console.log(this.x);
            }
        }
        var f5 = new Fn5;
        var f6 = new Fn5;
        // f5 和 f6 都是Fn这个类的一个实例,都拥有x和getx两个属性.但是这两个属性都是各自的私有的属性,所以
        console.log(f5.getX === f6.getX); //false

        // in 检测某一个属性是否属于这个对象 (attr in object) ,不管是私有的属性还是共有的属性,只要存在,用in来检测都是true
        console.log("getX" in f5); // true 是他的一个属性
        // hasOwnProperty 用来检测某一个属性是否为这个对象的私有属性,这个方法只能检测私有的属性
        console.log(f5.hasOwnProperty("getX")); // -> true


        // 思考:检测某一个属性是否为该对象的"共有属性" hasPubProperty
        function hasPubProperty(obj,attr) {
            // 首先保证是他的一个属性 并且还不是私有的属性,那么只能是共有的属性
            return (attr in obj) && !(obj.hasOwnProperty(attr));
        }
        console.log(hasPubProperty(f1,"getX")); // false

        // 例6
        // isprototypeOf 需要自己查

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

Top