JS(十四)原型、原型链、call、apply、bind（下）

写在最前面

• __proto__指向的是是他的对象也就是prototype
• prototype指向的是他的原型对象
• constructor 指向的是他的构造函数

__proto__是干什么用的

function Person(){
    
}
var person = new Person();

我们通过new的时候,里面经历了三段式

Person.prototype,name = "wu";
function Person(){
    //var this = {
    //    __proto__:Person.prototype
    //    __proto__指向的是他的原型
    //
    //}
}
var person = new Person();

因为__proto__指向的是他的原型,所以我们在person.name的时候,自己本身没有,他才会通过这个__proto__这个属性找到person.prototype上面去

---

修改原型

function Person(){
    
}

var obj = {
    name:"sunny";
}
var person = new Person();

person.__proto__ = obj;
person.name//打印出来"sunny",因为它的原型改了

Person.prototype.name = "sunny";
function Person(){
    
}
var person = new Person();
Person.prototype.name = 'cherry'

parson.name //打印出来"cherry"
//因为他的原型被改了

----------------分割线----------------
Person.prototype.name = "sunny";
function Person(){
    
}

Person.prototype.name = 'cherry'
var person = new Person();

parson.name //打印的还是"cherry"
//因为他的原型被改了

----------------分割线----------------

Person.prototype.name = "sunny";
function Person(){
    //var this = {__proto__ :Person.pertotype}
}

var person = new Person();
Person.prototype={
    name:cherry
}

parson.name //打印的是"sunny"
//类似这种,他把整个对象都给换了,而不是换的属性
//Person.prototype = {name:"a"}
//__proto__ = Person.prototype 
//Person.prototype = {name:"b"}

-------分割线-----------------------------
Person.prototype.name = "sunny";
function Person(){
    //var this = {__proto__ :Person.pertotype}
}

Person.prototype={
    name:cherry
}

var person = new Person();

person.name//打印出cherry
//正常编译;

原型链

• 如何构成原型链;
• 原型链上属性的增删改查
• 绝大多数对象的最终都会继承自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最终原型

var obj = {};

var obj1 = new Object();
两种写法一样;
//obj1.__proto__ --->Object.prototype


Person.pertotype = {}-->//object.prototype
function Person(){
    
}

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();
counter.count // 1

上面代码中，counter.inc方法被赋值给变量func。这时必须用bind方法将inc内部的this，绑定到counter，否则就会出错

###PS : 后面call\apply\bind方法是借的阮一峰 阮大神的JavaScript标准考教 非商业用途

可以关注一下