8

作者: My丿飞 | 来源:发表于2018-08-12 17:12 被阅读0次

    定义

    原型是function对象的一个属性它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象,可以继承该原型的属性和方法。原型也是对象。

    // Person.prototype    --原型

    // Person.prototype={}  是祖先

    Person.prototype.name='hehe'; //共有的

    function Person(){

     

    }

    var person=new Person();//hehe

    var person1=new Person();//hehe

    特点:可以继承该原型的属性和方法。

    // Person.prototype    --原型

    // Person.prototype={}  是祖先

    Person.prototype.height=1400;

    Person.prototype.lang=4900;

    Person.prototype.carName='BMW';

    function Person(color,owner){

      this.owner=owner;

      this.color=color;

    }

    var person=new Person('red','prof.ji'); //Person.carName='BMW'

    var person1=new Person('green','laodeng');//Person.carName='BMW'

    如何构成原型链;

    原型链上属性的增删改查

    绝大多数对象的最终都会继承自Object.prototype

    Object.create(原型)

    function Person(){

    }

    Person.prototype

    //打印出

    Object{};

    //里面有的属性

    constructor : Person();

    __proto__ : Object;

    //我们发现在prototype里面,他还有原型,说明原型他还有原型

    原型链上的增删改查和原型上的差不多,只能在自己的身上改,没有办法修改父级上面的…但是也不是完全不可以

    最终原型

    Grand.prototype.name = "shen"

    function Grand(){

    }

    var grand = new Grand;

    Father.prototype = grand;

    function Father(){

    }

    var father = new Father;

    son.prototype = father;

    function son(){

    }

    var son = new Son();

    son.name//打印出shen

    //依次排查

    Grand.prototype.__proto__ = object.prototype

    //object.prototype最终原型

    Object.create : 就是一个新的对象可以继承一个对象的属性,并且可以自行添加属性

    //var Obj = Object.create(原型)

    var Obj = {

        name = "sunny",

        age : 123

    };

    var obj1 = Object.create(obj);

    obj1.name//打印出sunny

    添加属性

    var parents = {

        name : "wu",

        bron : "2013",

        from : "China"

    }

    var child = Object.create(

        parents,

        {

            title : {

                value : "技术分享",

            },

            year : {

                value : "18",

            }

        }

    );

    特殊情况

    var a = object.create(null)

    //这种情况他就没有原型

    call\apply\bind

    JavaScript 提供了call、apply、bind这三个方法,来切换/固定this的指向。

    作用,改变this指向;

    区别,后面传的参数不同

    function Person(name,age){

        //this == obj;

        this.name = name;

        this.age = age;

    }

    var person = new Person("shen" 150);

    var obj = {};

    Person.call(obj,"wu",200);

    函数实例的call方法,可以指定函数内部this的指向(即函数执行时所在的作用域),然后在所指定的作用域中,调用该函数

    var obj = {};

    var f = function () {

      return this;

    };

    f() === window // true

    f.call(obj) === obj // true

    上面代码中,全局环境运行函数f时,this指向全局环境(浏览器为window对象);call方法可以改变this的指向,指定this指向对象obj,然后在对象obj的作用域中运行函数f

    var n = 123;

    var obj = { n: 456 };

    funcion a() {

      console.log(this.n);

    }

    a.call() // 123

    a.call(null) // 123

    a.call(undefined) // 123

    a.call(window) // 123

    a.call(obj) // 456

    上面代码中,a函数中的this关键字,如果指向全局对象,返回结果为123。如果使用call方法将this关键字指向obj对象,返回结果为456。可以看到,如果call方法没有参数,或者参数为null或undefined,则等同于指向全局对象

    Function.prototype.apply()

    apply方法的作用与call方法类似,也是改变this指向,然后再调用该函数。唯一的区别就是,它接收一个数组作为函数执行时的参数,使用格式如下。

    func.apply(thisValue, [arg1, arg2, ...])

    apply方法的第一个参数也是this所要指向的那个对象,如果设为null或undefined,则等同于指定全局对象。第二个参数则是一个数组,该数组的所有成员依次作为参数,传入原函数。原函数的参数,在call方法中必须一个个添加,但是在apply方法中,必须以数组形式添加

    function f(x, y){

      console.log(x + y);

    }

    f.call(null, 1, 1) // 2

    f.apply(null, [1, 1]) // 2

    上面代码中,f函数本来接受两个参数,使用apply方法以后,就变成可以接受一个数组作为参数

    Function.prototype.bind()

    bind方法用于将函数体内的this绑定到某个对象,然后返回一个新函数

    var d = new Date();

    d.getTime() // 1481869925657

    var print = d.getTime;

    print() // Uncaught TypeError: this is not a Date object.

    上面代码中,我们将d.getTime方法赋给变量print,然后调用print就报错了。这是因为getTime方法内部的this,绑定Date对象的实例,赋给变量print以后,内部的this已经不指向Date对象的实例了

    bind方法可以解决这个问题。

    var print = d.getTime.bind(d);

    print() // 1481869925657

    上面代码中,bind方法将getTime方法内部的this绑定到d对象,这时就可以安全地将这个方法赋值给其他变量了。

    bind方法的参数就是所要绑定this的对象,下面是一个更清晰的例子。

    var counter = {

      count: 0,

      inc: function () {

        this.count++;

      }

    };

    var func = counter.inc.bind(counter);

    func();

    相关文章

      网友评论

          本文标题:8

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