终结原型

一.原型

定义: 在JS中,我们通常使用一个构造函数来创建对象,而每一个构造函数
内部都有一个prototype属性指向一个对象,这个对象中存放这所有
该构造函数创建实例的公共属性和方法,我们称prototype指向
的这个对象为显示原型。

每一个对象都还有一个隐式原型__proto__,这个属性也指向所述
所说的prototype指向的那个对象。这是一个非标准的获取原型的属性,
可以用Object.getPrototypeOf()代替

作用: 原型对象的作用就是用来存放实例中公共的属性和方法用的。

解释: 举个例子,几乎每个对象都天生可以使用toString这个方法,就是因为这个方法存放在了Object.ptototype中

原型链:实例访问方法的时候,如果自身没有,就会去他的原型上找,如果
再没有,就会去原型的原型上找一直找到Object的原型为止,否则就为空。

二.提取信息

上面对于初学者来说不是人话,我第一次接触原型时就是这样认为的。
没关系,我接下来为大家解读一下上面的关键信息。

2.1 构造函数

构造函数一般用来干嘛?答案在上面。对的用来创建对象。那么构造函数怎么使用呢?看下面

function Cat() {

}
var Cat= new Cat();
Cat.name = 'Kevin';
console.log(Cat.name) // Kevin
复制代码

构造函数函数名一般大写(业界规范)

2.2 prototype

每个函数中都有一个prototype属性,注意是每一个函数中,无论是构造函数还是箭头函数还有普通函数都有这个属性,而这个属性也是函数才有的。来段代码

function Cat () {

}
Person.prototype.name = 'xiaohei';
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // 'xiaohei';
console.log(person2.name) // 'xiaohei';
复制代码

那么这个prototype到底指向了什么呢?小镇做题家们请从上面的那段文字中找出关键信息,是的,prototype指向的是一个对象,这个对象中存放着所有该构造函数创建实例的公共属性和方法。那么这个prototype叫什么？原型。good!

2.3 __ proto __

上面我们已经完成了对于构造函数与显示原型的解读,那么接下来解读一下隐式原型__proto__,既然都是原型那么,它与prototype不同的地方在哪里呢?

第一点不同:__proto__是所有JavaScript对象(除了null)都有的属性
第二点不同:__proto__不是一个规范属性，该特性已经从 Web 标准中删除。一般都用Object.getPrototypeOf()获取原型。

三.实例,构造函数,原型的三角恋

构造函数与原型
构造函数通过prototype访问原型

实例与原型
实例通过__proto__访问原型

构造函数与实例
实例通过__proto__到原型再通过原型的constructor访问到构造函数

小声逼逼(constructor不是忘了将,而是故意到这里引出来的,兄弟们,相信我),还有构造函数就不指向实例了,没意义,它创建了那么多实例,指向呢一个呢?

constructor

每个原型都有一个constructor指向关联的构造函数

不信?验证一下

function Cat() {
}
console.log(Person === Cat.prototype.constructor); // true
复制代码

解释了constructor,我们举个例子,总结以上这三者的三角恋关系
现在我们有个明星构造函数Star,构造函数中有name属性,构造函数的原型中有sing方法

function Star(name){
this.name = name //名字属性
}
Star.prototype.sing = function(){
console.log("忘情水")
}
复制代码

通过这个构造函数,我们创建一个刘德华实例
var ldh = new Star("刘德华")

此时,实例,原型,构造函数的关系是怎么样的呢？

是不是打开思路啦,兄弟们。

四.原型链

还是接着用上面那个例子

var ldh = new Star("刘德华")
console.log(ldh.toString()) // [object,object]
复制代码

我们可以看到无论是ldh对象还是,ldh构造函数,还有原型上都没有toString这个方法。但是却可以打印出东西来,虽然不知道是,可以却像我们传递了一个信息,toString另有所在。

我也不和大家弯弯绕了,还是那句话,看看文章最上方的段话,找出关键句。

原型链:实例访问方法的时候,如果自身没有,就会去他的原型上找,如果
再没有,就会去原型的原型上找一直找到Object的原型为止,否则就为空。

所有toString到底在哪里呢？沿着原型找一找

console.log(ldh.__proto__) // ldh.__proto__指向Star的原型
复制代码

console.log(ldh.__proto__.__proto__)// ldh.__proto__.__proto__指向Object的原型,也就是toString的所在处
复制代码

各位,感谢看完。