• Javascript知识汇总------获取构造函数constructor名称和一些字符串处理方法


    一、构造函数名称获取

    每一个对象都有constructor属性
    每一个对象的constructor 属性描述的是其构造函数
    function Fn(){}
    var obj = new Fn();
    console.log( obj.constructor === Fn ); // true  对象的constructor属性描述的就是其构造函数

    下面代码所用的obj对象就是在此处创建的

    1. 利用字符串截取获取构造函数名称

    //利用字符串截取获取
    var str = ''+obj.constructor;
    var str1 = str.replace('function','|');//先将function字符用 | 代替,方便截取
    var startIndex = str1.indexOf('|'); //找到字符串截取开始索引
    var endIndex = str1.indexOf('(');  //找到字符串截取结尾索引
    if( startIndex != -1 && endIndex != -1 ){
        var name = str1.slice( startIndex+2,endIndex );
        console.log(name);
    }

    2. 利用正则表达式获取构造函数名称

    //利用正则表达式获取
    var reg = /function (.+)(/;
    var name1 = reg.exec(str);
    console.log(name1);

    3.利用对象name属性获取构造函数名称

    //用name属性获取constructor
    console.log(obj.constructor.name);//ie8以下不支持

     综合上面3种方法,ie8以下浏览器只能使用字符串截取已经正则表达式方法获得,而高级浏览器则3种方法都行,故需要对浏览器进行性能检测后做出兼容

    //兼容所有浏览器获得构造函数名称
    function getFnName(fn){
        /*
        if(typeof fn !== 'function') return;
        return fn.name ?
                fn.name:
                /function (.+)(/.exec(fn + '')[1];
        */  
    
        /*
        if(typeof fn !== 'function') return;
        return fn.name ||
                /function (.+)(/.exec(fn + '')[1];
        */
        
        
        return typeof fn !== 'function'?
                                undefined:
                                    fn.name ||
                                    /function (.+)(/.exec(fn + '')[1];
    }
    function PersonWu(){}
    var obj2 = new PersonWu();
    var name = getFnName(obj2.constructor);
    console.log(name);//PersonWu

    二、字符串方法

    var string = '123abc456';
    var i = 3; 
    //substring(startIndex,length) == substr  用法相同
    console.log(string.substring(0,i));//123  若传两个参数表示从左边开始从索引值0开始提取前i个字符
    console.log(string.substring(i));  //456  若传一个参数代表从左边开始第i个截取至最右侧
    //slice(startIndex,enIndex)
    console.log(string.slice(0,i))  //包左不包右,-1代表右侧第一位
    //string.replace(regexp/substr,replacement)
     

    三、单例模式,确保单例(通过属性是否存在判断)不安全因为外部可以更改变量

    第一种办法:

    function Construct(){
        // 确保只有单例,确保只构造一次
        if( Construct.unique !== undefined ){
            return Construct.unique; 
        }
        // 其他代码
        this.name = "NYF";
        this.age="24";
        Construct.unique = this;
    }
    var t1 = new Construct() ;
    var t2 = new Construct() ;
    // 那么也有的, t1 === t2 。

     第二种办法:

    var SingleTon = function(name){ //创建一个对象
        this.name = name;
        this.instance = null;
    };
    SingleTon.prototype.getName = function(){
        alert(this.name);
    };
    SingleTon.getInstance = function(name){
       if(!this.instance){
            this.instance = new SingleTon(name);
        }
        return this.instance;
    };
     
    var a = SingleTon.getInstance( 'instance1' );
    var b = SinleTon.getInstance( 'instance2' );
     
    alert( a === b);  //返回true

    四、单例模式缓存(闭包+构造函数)

    var single = (function(){
        var unique;
        function fn(){
            this.name = '1';
        }
        unique =  new fn;
        return function (){
            return unique;
        };
    })();
    single();

    五、单例代理模式

    var CreateDiv = function(html){
       this.html = html;
       this.init();
    };
     
    CreateDiv.prototype.init = function(){
       var div = document.createElement( 'div' );
       div.innerHTML = this.html;
       document.body.appendChild( div );
    };
    
    var ProxySingleTonCreateDiv = (function (){
        var instance;
        return function (html){
            console.log(instance)
            if(!instance){
                instance =   new CreateDiv( html );
            }
            return instance;
        }
    })();
    var t1 = new ProxySingleTonCreateDiv('a');
    var t2 = new ProxySingleTonCreateDiv('b');
    console.log(t1===t2)
  • 相关阅读:
    面向对象 委托
    面向对象 继承 接口
    C# 面向对象 , 类与对象
    C# 知识点回顾
    SQL 数据库知识点回顾
    C# 10 总复习
    spring boot jpa 表关联查询分组 group by 去重
    钉钉新增考勤组 设置考勤规则
    elasticsearch 学习之父子关联查询 parent/child
    Elasticsearch 查询学习
  • 原文地址:https://www.cnblogs.com/iwzyuan/p/8707739.html
Copyright © 2020-2023  润新知