手写js中的原生方法

87 阅读1分钟

1,手写一个bind函数

示例——bind

        function fn(description) {
            console.log(`${this.name}--${this.name}--${description}`)
        }
        const obj = {
            name: '张三',
            age: 18
        }
        const bindFn = fn.bind(obj, '描述')
        bindFn()

手写一个bind

        function fn(description) {
            console.log(`${this.name}--${this.age}--${description}`)
        }
        const obj = {
            name: '张三',
            age: 18
        }
        Function.prototype.myBind = function (context, ...args) {
            context.fn = this
            return function() {
                context.fn(...args)
            }
        }
        const bindFn = fn.myBind(obj, '描述')
        bindFn()

2,手写一个call函数

示例——call

        function fn(a, b, c) {
            console.log(`${this.name}--${this.age}---${a}--${b}--${c}`)
        }
        fn.call({name: '张三', age: 18}, 1, 2, 3)

手写一个call

        function fn(a, b, c) {
            console.log(`${this.name}--${this.age}---${a}--${b}--${c}`)
        }
        Function.prototype.myCall = function (context, ...args) {
            context.fn = this
            context.fn(...args)
        }
        fn.myCall({ name: '张三', age: 18 }, 1, 2, 3)

3,手写一个apply

示例--apply

        function fn(a, b, c) {
            console.log(`${this.name}--${this.age}---${a}--${b}--${c}`)
        }
        const obj = {
            name: 'zs',
            age: 18
        }
        fn.apply(obj, [1, 2, 3])

手写一个apply

        function fn(a, b, c) {
            console.log(`${this.name}--${this.age}---${a}--${b}--${c}`)
        }
        const obj = {
            name: 'zs',
            age: 18
        }
        Function.prototype.myApply = function (context, args) {
            context.fn = this
            context.fn(...args)
        }
        fn.myApply(obj, [1, 2, 3])

4,手写一个instanceof

instanceof使用示例

        class Parent { }
        class Child extends Parent { }
        console.log(Child instanceof Parent) // false
        console.log(new Child() instanceof Parent) // true
        console.log(Parent instanceof Object) // true

从以上代码的结果可以看到,instanceof前一个必定是后一个的实例,同时所有的构造函数和类都是Object的实例。

手写instanceof

        class Parent {}
        class Child extends Parent {}


        function myInstanceof(child, parent) {
            parentProto = parent.prototype
            while(child) {
                if (child === parentProto) {
                    return true
                }
                child = child.__proto__
            }
            return false
        }
        console.log(myInstanceof(new Child(), Parent))
        console.log(myInstanceof(Child, Parent))
        console.log(myInstanceof(Parent, Object))

5, 手写一个new

new示例

        function Person(name, age) {
            this.name = name;
            this.age = age;
        }
        Person.prototype.sayHello = function () {
            console.log(`hello-${this.name}-${this.age}`);
        }
        var p1 = new Person('张三', 18);
        console.log(p1)
        p1.sayHello()

手写一个new

        function Person(name, age) {
            this.name = name;
            this.age = age;
        }
        Person.prototype.sayHello = function () {
            console.log(`hello-${this.name}-${this.age}`);
        }
        function newFn(fn, ...args) {
            const obj = {}
            obj.fn = fn
            obj.__proto__ = fn.prototype
            obj.fn(...args)
            delete obj.fn
            return obj
        }
        const p1 = newFn(Person, "张三", 20)
        console.log(p1)
        p1.sayHello()