老是据说面向对象,类,继承,__proto__,prototype,constructor…….因而乎小整顿一下。
起首说,JS里的继承是怎么弄的呢?
起首建立类(Person)
var Person = {
male: 0,
age:0,
name:'nothing',
say:function(){
console.log('Hello World');
}
}
怎样建立一个人呢?
var createPerson = function(){
return Object.create(Person);
}
建立门生
var Student = createPerson();
Student.say() //Hello World
Student.__proto__ === Person //true
Student.constructor === Person //Student的组织器照样Object
从这个可以看出什么呢?可以看出所谓的继承,就是下面的代码罢了:
SSSSS.__proto__ = BBBBB
然则呢?也没有prototype啥关联嘛,由于压根就和他没紧要,彷佛也不太好,换一种写法好了。
function Person (props){
this.name = props.name || 'nothing';
this.male = props.male || 0;
this.age = props.age || 0;
this.say = function(){
console.log('Hello world!');
}
}
继承建立student
var Student = new Person();
Student.__proto__ === Person.prototype //true
Student.constructor === Person //true
Student.say() //Hello world!
从上面代码可以看出,Student继承了Person.
假如我们想转变一下呢?
Student.say = function(){
console.log('Hello teacher, my name is ' + this.name);//Hello teacher, my name is nothing
}
那好,再建立一个coder类
var Coder = new Person();
Coder.say(); //Hello world!
这个不错嘛,如许在想建立Coder的子类,js和html,那就修正一下代码
function Coder (props){
Person.call(this,props);
this.tip = props.tip?props.tip.toUpperCase():'';
this.intro = function(){
console.log('I know '+(this.tip?this.tip:'nothing'));
}
this.say= function(){
console.log('hello, my name is ' + this.name);
}
}
var JSer = new Coder({
name:'Tony',
age:26,
tip:'js'
});
var htmler = new Coder({
name:'Jermy',
age:26,
tip:'html'
});
JSer.say(); //hello, my name is Tony
htmler.say(); //hello, my name is Jermy
JSer.intro(); //I know JS
htmler.intro();//I know HTML
如许得到了我们想要的效果,考证一下继承关联:
JSer instanceof Coder; //true
htmler instanceof Coder;//true
Coder instanceof Person;//false
如许就不好了,为何不是继承关联呢?检察一下Coder情况怎样?
Coder.__proto__ === Person.prototype; //false
Coder.__proto__ //function () { [native code] }
看来题目就出在这里,写一个中心函数补充一下?
var pass = function(child,parent){
var F = function(){};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
}
为了完成这一点,参考道爷(就是发现JSON的谁人道格拉斯)的代码,中心对象可以用一个空函数F来完成,大神写的代码,就是特么让人沉思。
仔仔细细想了下,我个人是这么邃晓的。
起首定义空函数这个不必诠释,然后把这个空函数的原型指向为Parent的原型,然后再把Child的原型指向这个新的F对象,一个圆满通报;
末了,在把Child原型的组织要领定义成Child;
华美的回身,效果以下:
function Coder (props){
Person.call(this,props);
this.tip = props.tip?props.tip.toUpperCase():'';
this.intro = function(){
console.log('I know '+(this.tip?this.tip:'nothing'));
}
this.say= function(){
console.log('hello, my name is ' + this.name);
}
}
var pass = function(Child,Parent){
var F = function(){};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
}
pass(Coder, Person);
var JSer = new Coder({
name:'Tony',
age:26,
tip:'js'
});
var htmler = new Coder({
name:'Jermy',
age:26,
tip:'html'
});
JSer.say(); //hello, my name is Tony
htmler.say(); //hello, my name is Jermy
JSer.intro(); //I know JS
htmler.intro();//I know HTML
JSer instanceof Coder; //true
htmler instanceof Coder;//true
Coder instanceof Person;//false
效果照样不对,因而我又在大神的肩膀上垫了一下脚。
var pass = function(Child,Parent){
var F = function(){};
F.prototype = Parent.prototype;
Child.__proto__ = new F();
Child.__proto__.constructor = Child;
}
效果就准确了……
又查了一下,总结一下:
一切的对象都有__proto__属性,该属性对应当对象的原型.
一切的函数对象都有prototype属性,该属性的值会被赋值给该函数建立的对象的_proto_属性.
一切的原型对象都有constructor属性,该属性对应建立一切指向该原型的实例的组织函数.
函数对象和原型对象经由过程prototype和constructor属性举行互相干联.
虽然说弄懂了些外表的东西,实际上最主要的缘由照样没邃晓,那就是原型链到底有什么用呢?
好了,以上就是本日总结的一些内容,愿望互相进修协助,可以在将来更好的事情生涯。
信息泉源:
(↓相干一些对我协助很大,Git的进修就是在这里看的,说的很细致也很活泼↓)
廖雪峰JavaScript教程
JS原型、原型链深切邃晓
深切分析js中的constructor 和prototype