js常见函数的实现

前端这点事 14 0


一、bind函数

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bind</title>
</head>
<body>
    <script>
        function _bind (fn, obj){
            obj.fn = fn
            return function (...args){
                obj.fn(...args)
                delete obj.fn
            }
        }
        var obj = {
            name: 'xinxin'
        }
        function test (){
            console.log(this.name)
            console.log(arguments)
        }
        var b = _bind(test, obj);
        b(20, 'man')
    </script>
</body>
</html>


二、call函数实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        Function.prototype._call = function (obj, ...args) {
            obj.fn = this;
            obj.fn(...args)
            delete obj.fn
        }
        function test() {
            console.log(this.name)
            console.log(arguments)
        }
        var obj = {
            name: 'xinxin'
        }
        test._call(obj, 1, 2, 3, 4)
    </script>
</body>
</html>


三、对象深拷贝

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function deep(val){
            if (typeof val == 'object' ){
                let res = Array.isArray(val) ? [] : {};
                for (let key in val){
                    if (typeof val[key] == 'object'){
                        res[key] = deep(val[key])
                    } else {
                        res[key] = val[key]
                    }
                }
                return res
            } else {
                throw new Error('不是可靠对象');
            }
        }
        var a = 11
        b = deep(a)
        console.log(b)
    </script>
</body>
</html>

四、Object.create实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function create (obj){
            function a (){}
            a.prototype = obj
            return new a()
        }
        var obj = {
            name: 'xinxin',
            say:function (){
                console.log(this.name)
            }
        }
        var b = create(obj)
        console.log(b.say())
    </script>
</body>
</html>

五、双向绑定的实现

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id="input">
    <span id="span"></span>
    <script>
        var _input = document.getElementById('input')
        var _span = document.getElementById('span')
        var obj = {
            text: ''
        }
        Object.defineProperty(obj, 'text', {
            configurable: true,
            enumerable: true,
            get() {
                console.log('获取数据了')
            },
            set(newVal) {
                console.log('数据更新了')
                _input.value = newVal
                _span.innerHTML = newVal
            }


        })
        _input.addEventListener('keyup',  function (e){
            obj.text = e.target.value
        })
        obj.text = '111'
    </script>
</body>

</html>

六、settimeout实现setinterval

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function shixian() {
            console.log(1)
            setTimeout(function () {
                shixian()
            }, 2000)
        }
        shixian()
    </script>
</body>

</html>


标签: JavaScript

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~