网站平台建设需求的意见,教育网站建设的策划方案,网站备案密码修改,周口城乡建设网站在谈原型链之前#xff0c;我们首先要了解自定义函数与 Function 之间是什么关系#xff0c;而构造函数、原型和实例之间又存在什么千丝万缕的关系呢#xff1f;其实#xff0c;所有的函数都是 Function 的实例。在构造函数上都有一个原型属性 prototype#xff0c;该属性… 在谈原型链之前我们首先要了解自定义函数与 Function 之间是什么关系而构造函数、原型和实例之间又存在什么千丝万缕的关系呢其实所有的函数都是 Function 的实例。在构造函数上都有一个原型属性 prototype该属性也是一个对象那么在原型对象上有一个 constructor 属性该属性指向的就是构造函数而实例对象上有一个 _proto_ 属性该属性也指向原型对象并且该属性不是标准属性不可以用在编程中该属性用于浏览器内部使用。 1 // _proto_
2 在函数里有一个属性prototype
3 由该函数创建的对象默认会连接到该属性上
4 //prototype 与 _proto_ 的关系
5 _proto_是站在对象角度来说的
6 prototype 是站在构造函数角度来说的 下面我们来看图说话。 1、构造函数、原型和实例之间的关系 ①Object ②FunctionObjectArray 了解这些之后我们再来讨论什么是原型链。说白了其实就是有限的实例对象和原型之间组成有限链就是用来实现共享属性和继承的。下面我们看代码说话。 1 var obj new Object();2 对象是有原型对象的3 原型对象也有原型对象 4 obj._proto_._proto_._proto_5 原型对象也有原型对象对象的原型对象一直往上找会找到一个null6 // 原型链示例7 var arr [];8 arr - Array.prototype -Object.prototype - null9 var o new Object();
10 o - Object.prototype - null; function Foo1(){this.name1 1;
}
function Foo2(){this.name2 2;
}
Foo2.prototype new Foo1();
function Foo3(){this.name 3;
}
Foo3.prototype new Foo2();
var foo3 new Foo3();
console.dir(foo3); 接下来就是继承问题了。 2、继承 1原型继承 1 function Animal(name){2 this.name name;3 }4 function Tiger(color){5 this.color color;6 }7 // var tiger new Tiger(yellow);8 // console.log(tiger.color);9 // console.log(tiger.name); //undefined
10 // Tiger.prototype new Animal(老虎); //一种方式
11 Object.prototype.name 大老虎; //第二种方式
12 var tiger new Tiger(yellow);
13 console.log(tiger.color);
14 console.log(tiger.name); 值得注意的是这里存在两个主要的问题 ①它不方便给父级类型传递参数②父级类型当中的引用类型被所有的实例共享 2ES5 提供了Object.create() 方法来实现继承 1 ————做兼容2 //shim垫片3 function create(obj){4 if(Object.create){5 return Object.create(obj);6 }else{7 function Foo(){}8 Foo.prototype obj;9 return new Foo();
10 }
11 } 这种方法是ES5的新特性其实就是复制继承。 3拷贝继承 1 var obj {};
2 obj.extend function(obj){
3 for(var k in obj){
4 this[k] obj[k];
5 }
6 } 4借用构造函数继承 ——被借用的构造函数中原型上的成员没有被借过来 1 function Animal(name){2 this.name name;3 }4 function Mouse(nickname){5 Animal.call(this,老鼠);6 this.nickname nickname;7 }8 var m new Mouse(杰瑞);9 console.log(m.name);
10 console.log(m.nickname); 存在的问题可以解决原型继承当中传参问题但是父类型当中的原型对象上的成员属性和方法不能被继承到 5组合继承 ——prototype对象是有动态性的 1 function Person(name){2 this.name name;3 }4 Person.prototype.showName function(){5 console.log(this.name);6 }7 function Student(name,age){8 Person.call(this,name);9 this.age age;
10 }
11 Student.prototype new Person();
12 Student.prototype.contructor Student;
13 Student.prototype.showAge function(){
14 console.log(this.age);
15 }
16 var stu new Student(张三,12);
17 stu.showName();
18 stu.showAge(); 【原型继承借用构造函数继承】它的特点就是属性每个实例一份方法共享 【小结】套用一句很粗暴的话所谓原型链就是找妈的一种行为方式就可以理解为人是人他妈生的妖是妖他妈生的。原型链的核心其实就只有一个属性共享和独立的控制当你的对象实例需要独立的属性所有做法的本质都是在对象实例里面创建属性。若不考虑太多你大可以在Person里面直接定义你所需要独立的属性来覆盖掉原型的属性。总之使用原型继承的时候要对于原型中的属性要特别注意因为他们都是牵一发而动全身的存在。现在最常用的方法是组合模式。 1、原型链 1构造函数、原型和实例的关系 ①构造函数都有一个属性prototype这个属性是一个对象Object的实例 ②原型对象prototype里面有一个constructor属性该属性指向原型对象所属的构造函数 ③实例对象都有一个_proto_属性该属性也指向构造函数的原型对象它是一个非标准属性不可以用于编程它是用于浏览器自己使用的 2prototype与_proto_的关系 ①prototype是构造函数的属性 ②_proto_是实例对象的属性 ——这两者都指向同一个对象 【总结】i函数也是对象对象不一定是函数 ii对象的本质无序的键值对集合键值对当中的值可以是任意数据类型的值 iii对象就是一个容器这个容器当中放的是属性和方法 3属性搜索 ①在访问对象的某个成员的时候会先在对象中找是否存在 ②如果当前对象中没有就在构造函数的原型对象中找 ③如果原型对象中没有找到就到原型对象的原型上找 ④知道Object的原型对象的原型是null为止 2、Function ——所有函数都是Function的实例 ①本地对象独立于宿主环境浏览器的对象——包括Object、Array、Date、RegExp、Function、Error、Number、String、Boolean ②内置对象——包括Math、Globalwindow在js中就是全局变量使用的时候不需要new ③宿主对象——包括自定义对象、DOM、BOM转载于:https://www.cnblogs.com/DF-fzh/p/5619319.html
