美文网首页
重点--原型2

重点--原型2

作者: 潘肚饿兵哥哥 | 来源:发表于2019-06-24 18:13 被阅读0次
function MyClass(){
                    
    }       
    
    //向MyClass原型中添加一个name属性
    MyClass.prototype.name = "我是原型中的名字";
    
    var mc = new MyClass();
    console.log(mc.name);//mc里没有name属性,就会去原型里找,返回值  我是原型中的名字
        

\color{rgba(254, 67, 101, .8)}{用in检查一个对象中是否有某个属性 ,如果对象中没有,原型中有,也会返回true}

function MyClass(){
                    
    }       
    
    //向MyClass原型中添加一个name属性
    MyClass.prototype.name = "我是原型中的名字";
    
    var mc = new MyClass();
    console.log(mc.name);//mc里没有name属性,就会去原型里找,返回值  我是原型中的名字
    
    console.log("name" in mc);//用in检查一个对象中是否有某个属性,只检查自身,不检查原型
    console.log(mc.hasOwnProperty("name"));
image.png
function MyClass(){
                    
    }       
    
    //向MyClass原型中添加一个name属性
    MyClass.prototype.name = "我是原型中的名字";
    
    var mc = new MyClass();
    mc.age = 18;
    
    console.log(mc.hasOwnProperty("age"));
    console.log(mc.hasOwnProperty("hasOwnProperty"));
image.png

\color{rgba(254, 67, 101, .8)}{hasOwnProperty();这个方法只检查他自身}
\color{rgba(254, 67, 101, .8)}{如上图,mc本身没有添加这个方法:}
\color{rgba(254, 67, 101, .8)}{mc.hasOwnProperty("hasOwnProperty")返回 flase,}

\color{rgba(254, 67, 101, .8)}{实际上,他在原型的原型里:}

    function MyClass(){
                    
    }       
    
    //向MyClass原型中添加一个name属性
    MyClass.prototype.name = "我是原型中的名字";
    
    var mc = new MyClass();
    mc.age = 18;
    
    console.log(mc.hasOwnProperty("age"));//用hasOwnProperty这个方法检查mc里有age属性
    
    console.log(mc.hasOwnProperty("hasOwnProperty"));//但是mc里并没有hasOwnProperty这个方法
    
    console.log(mc.__proto__.hasOwnProperty("hasOwnProperty"));//它的原型里也没有这个方法
    
    //之所以找不到hasOwnProperty这个方法,是因为只要是对象就有原型,所以原型对象也有原型
    
    //所以去他的原型的原型里找:  原型的原型里有这个属性
    console.log(mc.__proto__.__proto__)
    
    //所以,hasOwnProperty在原型的原型里,返回true
    console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty"))
image.png

\color{rgba(254, 67, 101, .8)}{这就是原型链}


    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            
            /*
             * 创建一个构造函数
             */
            function MyClass(){
                
            }
            
            //向MyClass的原型中添加一个name属性
            MyClass.prototype.name = "我是原型中的名字";
            
            var mc = new MyClass();
            mc.age = 18;
            
            //console.log(mc.name);
            
            //使用in检查对象中是否含有某个属性时,如果对象中没有但是原型中有,也会返回true
            //console.log("name" in mc);
            
            //可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性
            //使用该方法只有当对象自身中含有属性时,才会返回true
            //console.log(mc.hasOwnProperty("age"));
            
            //console.log(mc.hasOwnProperty("hasOwnProperty"));
            
            /*
             * 原型对象也是对象,所以它也有原型,
             *  当我们使用一个对象的属性或方法时,会现在自身中寻找,
             *      自身中如果有,则直接使用,
             *      如果没有则去原型对象中寻找,如果原型对象中有,则使用,
             *      如果没有则去原型的原型中寻找,直到找到Object对象的原型,
             *      Object对象的原型没有原型,如果在Object原型中依然没有找到,则返回undefined
             */
            
            //console.log(mc.__proto__.hasOwnProperty("hasOwnProperty"));
            
            //console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));
            
            //console.log(mc.__proto__.__proto__.__proto__);
            
            //console.log(mc.hello);
            
            //console.log(mc.__proto__.__proto__.__proto__)mc的原型的原型就没有原型了,所以,这里找原型的原型的原型返回值为null,证明他只有原型的原型
            
        </script>
    </head>
    <body>
    </body>
</html>

相关文章

  • 重点--原型2

  • 单信js——2原型(重点)

    面向对象 编程语言中,分为“面向过程”和“面向对象”两大类。面向过程就如自己造一台电脑,面向对象则是用现有的配件组...

  • 重点--原型对象

    __Proto__ 源码:

  • 2020-06-01 学习计划

    1、js:红宝书,重点:原型,继承,闭包,设计模式 2、webpack: 打包原理,性能优化,配置,插件,看视频 ...

  • web前端 -- Day24 js高级

    原型链 重点 原型链: 是一种关系,实例对象和原型对象之间的关系,关系是通过原型(__proto__)来联系的。 ...

  • 深入javascript之原型和原型链

    原型和原型链是js中的难点也是重点,明白了原型和原型链会让我们在后面不管是学习还是工作都会更加高效,并且原型和原型...

  • 拒绝做“原型输出机”

    在很多公司,产品就是“原型输出机”,收到运营或领导的需求就去刷刷刷的把原型画了,似乎整个重点就是画原型了,其实原型...

  • 2022-03-07 笔试总结

    使用原型链或 class ,实现加减乘除的链式调用重点1: 链式调用 .fun1().fun2().fun3()重...

  • 设计模式-原型模式

    原型设计模式的定义 用原型实例指定创建对象的种类,并通过拷贝这些原型创建新的对象。这里重点在拷贝,就像电脑的拷贝和...

  • 如何画出专业的原型图?(上)

    怎么样的原型图才算是专业的原型图呢?文章总结了一些经验,希望对你有所帮助。 本篇文章(原型上篇)重点内容: 清晰的...

网友评论

      本文标题:重点--原型2

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