美文网首页
14-构造函数模式(拓展)

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

作者: Young_Blood | 来源:发表于2016-07-28 17:09 被阅读9次

<!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>

相关文章

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

  • 构造函数模式-拓展

    先看如下构造函数 在构造函数模式中,new Fn执行,如果Fn中不需要传递参数的话,后面的"()"可以省略。 th...

  • 前端面试题总结【37】:javascript对象的几种创建方式

    工厂模式 构造函数模式 原型模式 混合构造函数和原型模式 动态原型模式 寄生构造函数模式 稳妥构造函数模式 推荐:...

  • 对象的创建与继承

    创建对象 工厂模式 => 构造函数模式 => 原型对象模式 => 构造函数模式+原型对象模式 工厂模式 构造函数模...

  • 构造函数-js-高级程序设计-第六章笔记

    前言 理解对象 创建对象构造函数模式原型模式组合使用构造函数模式和原型模式动态原型模式寄生构造函数模式稳妥构造函数...

  • 第六章——创建对象

    一、寄生构造函数模式、工厂模式、稳妥构造函数模式的区别与联系 寄生构造函数模式(重写了构造函数的返回值): 工厂模...

  • 前端设计模式

    1.写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 构造函数模式 构造函数模式是...

  • JS函数

    1.0 工厂模式 2.0 构造函数模式 3.0 原型模式 4.0 构造函数 + 原型模式 实例化构造函数时,返回的...

  • Js创建对象的几种模式

    Js创建对象的几种模式 工厂模式 构造函数模式 原型模式 组合使用构造函数模式和原型模式 动态原型模式 稳妥构造函数模式

  • 设计模式

    构造函数模式 混合模式 混合模式就是构造函数模式和原型模式的混合,在混合模式中,构造函数用于定义实例属性,而原型模...

网友评论

      本文标题:14-构造函数模式(拓展)

      本文链接:https://www.haomeiwen.com/subject/szvajttx.html