【JavaScript】10_常用属性及旧类,new运算符

100 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第12天,点击查看活动详情

1、instanceof和hasOwn

instanceof 用来检查一个对象是否是一个类的实例

  • instanceof检查的是对象的原型链上是否有该类实例

只要原型链上有该类实例,就会返回true

  • dog -> Animal的实例 -> Object实例 -> Object原型
  • Object是所有对象的原型,所以任何和对象和Object进行instanceof运算都会返回true

in

  • 使用in运算符检查属性时,无论属性在对象自身还是在原型中,都会返回true

对象.hasOwnProperty(属性名) (不推荐使用)

  • 用来检查一个对象的自身是否含有某个属性

Object.hasOwn(对象, 属性名)

  • 用来检查一个对象的自身是否含有某个属性
    <script>
        class Animal {}
        class Dog extends Animal {}
        const dog = new Dog()
​
        // console.log(dog instanceof Dog) // true
        // console.log(dog instanceof Animal) // true
        // console.log(dog instanceof Object) // true
​
        const obj = new Object()
​
        // console.log(obj.__proto__)
        // console.log(Object.prototype)
​
        // dog.__proto__ / Dog.prototype
​
        class Person {
            name = "孙悟空"
            age = 18
​
            sayHello() {
                console.log("Hello,我是", this.name)
            }
        }
​
        const p = new Person()
        // console.log("sayHello" in p)
        // console.log(p.hasOwnProperty("sayHello"))
        // console.log(p.__proto__.__proto__.hasOwnProperty("hasOwnProperty"))
​
        console.log(Object.hasOwn(p, "sayHello"))
    </script>

2、旧类

早期JS中,直接通过函数来定义类

  • 一个函数如果直接调用 xxx() 那么这个函数就是一个普通函数

  • 一个函数如果通过new调用 new xxx() 那么这个函数就是一个够早函数

  • 等价于:

    class Person{

    }

    <script>
        var Person = (function () {
            function Person (name,age){
                //在构造函数中,this表示新建的对象
                this.name = name
                this.age = age
​
                // this.sayHello = function(){
                //     console.log(this.name)
                // }
            }
​
            //向原型中添加属性(方法)
            Person.prototype.sayHello = function(){
                console.log(this.name)
            }
​
            //静态方法
            Person.staticProperty = 'xxx'
            //静态方法
            Person.staticMethod = function(){}
​
            return Person
        })()
​
        const p = new Person('孙悟空',18)
        console.log(p)
​
        var Animal = (function(){
            function Animal(){
​
            }
            return Animal
        })()
​
        var Cat = (function(){
            function Cat(){
​
            }
​
            //继承Animal
            Cat.prototype = new Animal()
​
            return Cat
        })()
​
        var cat = new Cat()
        console.log(cat)
    </script>

3、new运算符

new运算符是创建对象时要使用的运算符

  • 使用new时,到底发生了哪些事情: developer.mozilla.org/en-US/docs/…

  • 当使用new去调用一个函数时,这个函数将会作为构造函数调用, 使用new调用函数时,将会发生这些事:

    1. 创建一个普通的JS对象(Object对象 {}), 为了方便,称其为新对象
    2. 将构造函数的prototype属性设置为新对象的原型
    3. 使用实参来执行构造函数,并且将新对象设置为函数中的this
    4. 如果构造函数返回的是一个非原始值,则该值会作为new运算的返回值返回(千万不要这么做) 如果构造函数的返回值是一个原始值或者没有指定返回值,则新的对象将会作为返回值返回 通常不会为构造函数指定返回值
    <script>
        function MyClass(){
            var newInstance = {}
            newInstance.__proto_ = MyClass.prototype
        }
​
        var mc = new MyClass()
        console.log(mc)
​
        class Person {
            constructor(){
​
            }
        }
​
        new Person()
    </script>