美文网首页
Javascript基础笔记(5)-面向对象(下)

Javascript基础笔记(5)-面向对象(下)

作者: 布拉德澈 | 来源:发表于2023-02-26 10:26 被阅读0次

    一、用 new操作符调用函数

    *Javascript规定,使用new操作符调用函数的四步

    • 1.函数体会自动创建出一个空白对象
    • 2.函数的上下文(this)会指向这个对象
    • 3.函数体内的语句会执行
    • 4.函数会自动返回上下文对象,即使函数没有return语句
    function fun() {
        this.a = 3; 
        this.b = 5;
    }
    var obj = new fun();
    console.log(obj);   //fun {a: 3, b: 5}
    

    二、类与实例

    构造函数和“类”.png

    类描述对象拥有的属性和方法,并不具体指明属性的值。
    实例是具体的对象。

    • Java、c++等是“面向对象”(object-oriented)语言
    • Javascript是“基于对象”(object-based)语言

    Javascript中的构造函数类比OO语言中的“类”,写法的确类似,但和真正OO语言还是有本质不同。

    三、prototype和原型链查找

    任何函数都有\color{red}{prototype属性},prototype即“原型”的意思。

    \color{red}{(一) 什么是prototype}

    image.png
    <script>
            function sum(a, b) {
                return a + b;
            }
            console.log(sum.prototype);
            console.log(typeof sum.prototype);
        </script>
    
    
    结果.png
    普通函数的prototype属性性没有什么用处,而构造函数的prototype属性非常有用。
    \color{red}{构造函数的prototype是实例的原型}
    构造函数的prototype是实例的原型.png
        <script>
            function People(name, age, sex) {
                this.name = name;
                this.age = age;
                this.sex = sex;
            }
            //实例化
            var xiaohong = new People('小红', 12, '女')
            //测试三角关系是否存在
            console.log(xiaohong.__proto__ === People.prototype);
        </script>   
      //true
    

    (二)原型链查找

    Javascript规定:\color{red}{实例可以打点访问它的原型的属性和方法},即“原型链查找”

            function People(name, age, sex) {
                this.name = name;
                this.age = age;
                this.sex = sex;
            }
            People.prototype.nationnality = '中国';
            //实例化
            var xiaohong = new People('小红', 12, '女')
            console.log(xiaohong.nationnality);
            //中国
    
    实例结果演示.png
    原型链查找的意义.png

    (三)hasOwnPrototype属性 和 in操作符

    hasOwnPrototype方法可以检查对象是否真正“自己拥有某属性或则方法”

    xiaohong.hasOwnPrototype('name');  //true
    xiaohong.hasOwnPrototype('sex');  //true
    xiaohong.hasOwnPrototype('age');  //true
    xiaohong.hasOwnPrototype('nationnality');  //false
    

    in运算符只能\color{red}{检查某个属性或方法是否可以被对象访问,不能检查是否是自己的属性和方法}

    'name' in xiaohong    //true
    'age' in xiaohong    //true
    'sex' in xiaohong    //true
    'nationality in xiaohong    //true
    

    相关文章

      网友评论

          本文标题:Javascript基础笔记(5)-面向对象(下)

          本文链接:https://www.haomeiwen.com/subject/alhtldtx.html