2021-07-26 继承原型 new操作符 this指向

继承_原型 (继承叫经典继承 也叫 混合继承)

一、
当B构造函数继承A构造函数的时候,在B构造函数中 借用A构造函数从而继承A构造函数里的属性
代码如下:

   function A(name, age) {
            this.name = name
            this.age = age
        }

    function B(name, age) {
            //借用父构造函数 来继承父构造函数里的属性
            A.call(this,name,age)
        }
        var b = new B('小美', 16)
        console.log(b); //B {name: "小美", age: 16}

二、
通过B构造函数的.prototype.方法名= A构造函数的.prototype.方法名 来继承原型上的方法
代码如下:

function A(name, age) {
            this.name = name
            this.age = age
        }
        A.prototype.say = function () {
            //console.log(this.name);
        }
        function B(name, age) {
            //借用父构造函数 来继承父构造函数里的属性
            A.call(this, name, age)
        }
        B.prototype.say = A.prototype.say
        var b = new B('小美', 16)
        b.say()
        console.log(b); //B {name: "小美", age: 16}

原型:prototype
在构造函数的原型上 添加一个方法 通过这个构造函数创建出来的对象 都共用原型上的方法

 function A(name, age) {
            this.name = name
            this.age = age
        }

        //让所有 用A构造函数创建出来的对象 都共用一个say方法  原型:prototype
        A.prototype.say = function () {
            // console.log(this.name); 
        }
        var a =new A('a',1)
        var b =new A('b',1)
        console.log(a.say==b.say);//true

new 操作符帮我们做了什么

分为四步:
1、创建了一个空对象this
2、将构造函数的作用域赋给新对象(也就是this现在指向
了这个新对象)
3、给空对象this 添加属性
4、返回这个this

function Person(name,age,sex){
    //var this={} //new操作符背后帮我们已经var好了一个空的对象 
    this.name=name
    this.age=age
    this.sex=sex
    //return this //普通函数需要return这个对象 构造函数中  
    // New操作符已经帮我们return了这个值 所以这里不需要 
    // 写return
}
 var p=new Person('小米',18,'男')
 console.log(p); //Person {name: "小米", age: 18, sex: "男"}

this指向

  1、指函数的调用者
  2、构造函数内的this指的是 即将创建的实例对象
  3、绑定事件的dom元素

call apply bind 都可以改变this指向

       var obj={
            name:'张三',
            say:function(str,str2){
                console.log(this)//这里的this已经更改为{name: "李四"}
                console.log(this.name+' '+str+' ' +str2);//李四 hello world
            }
        }
        obj.say('hello') //张三 hello
        obj.say.call({name:'李四'},'hello','world')      //李四 hello world
        obj.say.apply({name:'李四'},['hello','world']) //李四 hello world
        obj.say.bind({name:'李四'},'hello','world')()   //李四 hello world

如上代码 可以看出
call跟apply的用法几乎一样,唯一的不同就是传递的参数不同,call只能一个参数一个参数的传入。
apply则支持传入一个数组,哪怕是一个参数也要是数组形式。最终调用函数时候这个数组会拆成一个个参数分别传入。
bind方法,是直接改变这个函数的this指向并且返回一个新的函数,之后再次调用这个函数的时候this都是指向bind绑定
的第一个参数。bind传参方式跟call方法一致。

你可能感兴趣的:(2021-07-26 继承原型 new操作符 this指向)