ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

javascript权威指南第22章高级技巧

2019-09-15 23:54:18  阅读:179  来源: 互联网

标签:指南 function Object return Polygon 22 javascript value var


//22.1
//22.1.1 安全的类型检测
var value = new Array();
var isArray = value instanceof Array;
var isArray = typeof value; //比如正则表达式操作符会返回function
//由于所有类型都是派生于Object 对象
function isArray(value) {
    return Object.prototype.toString.call(value) == '[object Array]';
}

function isFunction(value) {
    return Object.prototype.toString.call(value) == '[object Function]';
}

function isRegExp(value) {
    return Object.prototype.toString.call(value) == '[object RegExp]';
}


// 21.1.2 作用域安全的构造函数

function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
}
//正确构造
var person = new Person('Nicholas', 29, 'Software Engineer'); //构造一个对象
//意外的构造
person = Person('Nicholas', 29, 'Software Engineer'); //这样被当函数执行,this指向window

//安全的构造对象
function Polygon(sides) {
    if (this instanceof Polygon) {
        this.sides = sides;
        this.getArea = function () {
            return 0;
        }
    } else {
        return new Polygon(sides);
    }
}

//窃取模式继承存在的问题

function Rectangle(width, height) {
    Polygon.call(this, 2);
    this.width = width;
    this.height = height;
    this.getArea = function () {
        return this.width * this.height;
    };
}

var rect = new Rectangle(5, 10);
alert(rect.sides); //undefined 因为基类 Polygon 是作用域安全的
// 当new Rectangle() 构造函数已经锁定this =Rectangle
// 通过  Polygon.call(this,2);构造函数时候 this!=Polygon
// 此时 Rectangle this 与 Polygon this 不同域因此不会被继承属性

//利用原型继承方式可以解决这个问题
Rectangle.prototype = new Polygon(0);


//22.1.3 懒性载入函数
    //假如页面js脚本会重复多次执行
    //因为浏览器是在当下一旦确定就不会变
    //因此这里只要第一次判断出支持的请求方式后
    //就直接覆盖新的声明函数给当前函数。
    //从而实现简化逻辑if语句
function CreateXMLHttpRequest() {
    if (typeof XMLHttpRequest != undefined) {
        return function () {
            return new XMLHttpRequest();
        }
    }else if(typeof ActiveXObject!=undefined){
        return function(){
          return  new ActiveXObject('');
        }
    }
}

//22.1.4 函数绑定

var handler ={
    message:'Event handled',
    handleClick:function(event){
        alert(this.message);
    }
};

// function callback(event){
//     handler.handleClick(event);
// }

var btn = document.getElementById('my-btn');

btn.addEventListener('click',function(event){
    handler.handleClick(event);
},false);

//创建一个闭包(闭包是隔断作用域)
function bind(fn,context){
    return function(){
        return fn.apply(context,arguments);
    }
}

btn.addEventListener('click',bind(handler.handleClick,handler),false);


//22.1.5 函数柯里化
//柯里化通用方式
function curry(fn,context){
    
    var args = Array.prototype.slice.call(arguments,2); //取从数组下表2开始后的参数(外部参数)
                                                       //前2参数是fn context
    return function(){

        var innerArgs =Array.prototype.slice.call(arguments); //闭包函数参数,即当前闭包函数
        var finalArgs =  args.concat(innerArgs); //外部函数参数和闭包函数链接起来    
       
        return fn.apply(context,finalArgs);

    };
}

//22.2 防篡改对象
// 22.2.1 不可拓展对象

Object.preventExtensions(person); //设置该对象不可拓展

if(Object.isExtensible(person)){

}

//22.2.2  密封的对象

Object.seal(person);
if(Object.isSealed(person)){

}

//22.2.3 冻结的对象

Object.freeze(person);


//22.3.1 重复的定时器
var interval =250;
setTimeout(function(){
    //处理逻辑
    var div = document.getElementById('myDiv');
    var left = parseInt(div.style.left)+5;
    div.style.left =left+"px";
    if(left<200){
        setTimeout(arguments.callee,interval);
    } 
},interval);


//22.3.2 Yielding Processes

function chunk(array,process,context){
    setTimeout(function(){
        var item =array.shift();
        process.call(context,item);

        if(array.length>0){
            setTimeout(arguments.callee,100);
        }
    },100);
}

var data =[12,123,1234,453,436];

function printValue(item){
    var div = document.getElementById('myDiv');
    div.innerHTML += item+"<br>";
}

chunk(data,printValue);


//22.3.3 函数节流

var processor ={
    timeoutId:null,
    //实际进行处理的方法
    performProcessing:function(){
        //实际执行的代码
    },
    process:function(){
        clearTimeout(this.timeoutId); //清除当前定时器,执行代码逻辑后再设置定时器
        var that =this;  //引用this指针
        this.timeoutId =setTimeout(function(){
            that.performProcessing();
        },100);
    }
};

//尝试开始执行
processor.process();

//简化模式
function throttle(method,context){
    clearTimeout(method.tId);
    method.tId =setTimeout(function(){
        method.call(context);
    },100);
};


//22.4 自定义事件


//22.5 拖放

  

标签:指南,function,Object,return,Polygon,22,javascript,value,var
来源: https://www.cnblogs.com/ms_senda/p/11525152.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有