【JavaScript】原型及原型链
2018-12-08 18:54
246 查看
前言
据网上的文章说,弄明白了原型链,才算真的入门了前端。首先我们要明白这几个东西。prototype、proto、constructor。当然他们的基础就是构造函数,我们先从构造函数开刀!
构造函数
构造函数就是初始化一个实例对象。其余的就不多论述了,举了例子
//构造函数 function Person(name, age) { //属性 this.name = name; this.age = age; //在构造函数中的方法 this.eat = function () { console.log("吃好吃的"); }; } var person1 = new Person('小李', 28); var person2 = new Person('小王', 23);
这个例子中person1和person2都是Person的一个实例。那它们都有一个constructor属性,该属性指向Person。
原型对象
为什么会有原型对象呢?是因为我们要使用一些属性和方法,如果我们每个对象的的属性都一样,方法也一样。那么这是有多少个对象就要开辟多少个空间,为了节省控件。可以把属性和方法通过原型的方式来进行赋值。
在JavaScript中,每当定义一个对象时候,对象中都会包含一些预定义的属性。其中每个函数对象有一prototype属性,这个属性指向的就是原型对象。
接着上面的构造函数举栗子:
//在Person的原型中添加方法 Person.prototype.sayHi = function () { console.log("您好啊,怎么这么帅,哈哈"); } //现在我们有100个对象 for(var i=0;i<100;i++){ var per =new person("小米",20); per.sayHi(); } //这是会100个对象会开辟100个空间,但是这100个空间中没有sayHi的方法, //这100个sayHi都是指向一个地方的
那_proto_和prototype有什么区别的,我们去证实一下
console.log(per._proto_ == Person.prototype); //true //实例对象的原型_proto_和构造函数的原型prototype指向是相同的 //实例对象中的_proto_原型指向的是构造函数中的原型prototype
所以实例对象可以直接访问原型中的属性或方法。
实例对象中_proto_是原型,为浏览器使用;构造函数中的prototype是原型,为程序猿使用。
原型链
原型链:是一种关系,实例对象和原型对象之间的关系,关系是通过原型(proto)来联系的。
举个简单的栗子就明白了:
//人的构造函数 function Person(age){ this.age=age; } //人的原型对象方法 Person.prototype.eat=function(){ console.log("人的吃"); } //学生的构造函数 function Student(){ } //学生的原型,指向了人的实例对象 Student.prototype=new Person(10) var stu=new Student(); stu.eat();
学生的原型指向人的实例对象,从而改变了原型的指向。也就形成了一个原型链。
总结
一个很难的东西,你能很简单的讲给别人听,那么你才算是真的了解它了。
相关文章推荐
- 转-JavaScript深入之从原型到原型链
- 深入JavaScript(5)强大的原型和原型链
- JavaScript原型和原型链
- 深入理解JavaScript系列(5):强大的原型和原型链
- 深入理解JavaScript系列 ----(5):强大的原型和原型链
- 深入理解JavaScript的原型和原型链
- 深入理解JavaScript系列(5):强大的原型和原型链
- JavaScript中的原型与原型链
- JavaScript中的原型与原型链
- [js高手之路]一步步图解javascript的原型(prototype)对象,原型链
- JavaScript笔记整理——原型和原型链
- 【javascript基础】原型与原型链
- JavaScript原型和原型链
- JavaScript原型和原型链
- JavaScript的原型及原型链
- javascript, 原型链,javascript 原型链方法,原型链继承,原型链和作用域链
- 三张图搞懂JavaScript的原型对象与原型链
- [我的理解]Javascript的原型与原型链
- Javascript原型和原型链
- 学习javascript面向对象 理解javascript原型和原型链