JS 原型原型链

太过爱你忘了你带给我的痛 2021-08-27 17:08 471阅读 0赞

1.创建对象的几种方式

1）字面量形式  (new Object()不是字面量  因为o1,o11产生的结果是一样的所以归为一类)

var o1={name:'o1'}
    var o2=new Object({name:'o11'})

2） 使用显式构造函数创建

var M=function(name){this.name=name}
    var o3=new M();

3) 这种创建方式 指定原型 P

var P={name:'o4'}
    var o4=Object.create(P)

输出结果

![20200523230132733.png][]

4)原型链理解

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpbnhpbl96aHU_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpbnhpbl96aHU_size_16_color_FFFFFF_t_70 1][]

5）在原型链上加属性方法被实例都继承

var M=function(name){this.name=name}
    var o3=new M('o3');
    M.prototype.say=function(){console.log('say hello')}

6)instanceof

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpbnhpbl96aHU_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpbnhpbl96aHU_size_16_color_FFFFFF_t_70 3][]

7)new运算符（工作原理）

*  一个新对象被创建。它继承自foo.prototype
 *  构造函数foo被执行。执行的时候，相应的传参会被传入，同时上下文(this)会被指定为这个新实例。new  foo等同于new foo(),只能用在不传递任何参数的情况。
 *  如果构造函数返回了一个‘对象’，那么这个对象会取代整个new出来的结果。如果构造函数没有返回对象，那么new出来的结果为步骤1创建的对象。

//new 实现的工作原理
    var new2=function(func){
        var o=Object.create(func);
        var k=func.call(o)
        if(typeof k==='object'){
            return k;
        }else{
            return o;
        }
    }

<html>
    
    <head>
        <title>class</title>
        <meta charset="utf-8">
        <style>
    
        </style>
    </head>
    
    <body>
        es6写法
        class {constructor 属性 方法}
        extent
        原型 原型链 hasOwnProperty instanceof
    </body>
    
    </html>
    <script src="../js/jquery.min.js"></script>
    <script>
        $(function () {
            //父类 class(模板) 后面 第一个字母大写 
            class People {
                //构造器
                constructor(name,age) {
                    this.name = name; //this指代当前构造函数
                    this.age = age;
                }
                sayHi() {
                    console.log(
                        `${this.name} say 早上好`  //`` es6模板语法
                    )
                }
            }
            //extends 继承
            class Student extends People {
                constructor(name,age,number) {
                    super(name,age) //super  执行父类构造函数
                  //  super(age)
                    this.number = number;
                }
                study() {
                    console.log(
                        `${this.name} studing`
                    )
                }
            }
            //new 一个实例
            const stu1 = new Student("学生1",10, 100);
            console.log(stu1.name)
            console.log(stu1.age)
            console.log(stu1.number)
            stu1.sayHi()
            stu1.study()
    
            console.log(typeof Student)  //function  语法糖
            console.log(stu1.__proto__) 
            console.log(stu1.__proto__.study()) 
            console.log(Student.prototype) 
            console.log(Student.prototype.study()) 
            console.log(stu1.__proto__===Student.prototype)
    
            console.log(stu1 instanceof Student) //instanceof 根据实例的隐式属性找class的显式属性 一层层向上
            console.log(stu1 instanceof People)
            console.log(stu1 instanceof Object)
            console.log(stu1.hasOwnProperty('number'))  //hasOwnProperty 判断是不是自己的属性 
            console.log(stu1.hasOwnProperty('sayHi'))
    
        })
    </script>

[20200523230132733.png]: /images/20210730/8f63c22002d84b8baf9e2c72af59f8a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpbnhpbl96aHU_size_16_color_FFFFFF_t_70]: /images/20210730/1727d49d564b4254b9d39e74860fd77c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpbnhpbl96aHU_size_16_color_FFFFFF_t_70 1]: /images/20210730/20a901274fbf4cb097f1b1cf81de2c1f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpbnhpbl96aHU_size_16_color_FFFFFF_t_70 2]: /images/20210730/edafb544b2484deb96c57797e287e308.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpbnhpbl96aHU_size_16_color_FFFFFF_t_70 3]: /images/20210730/38eda68f2df443fc8c0155e118451074.png