js中原型和原型链
1.原型: 在JavaScript 中,对象被表现为prototype 。
原型其实一直存在于我们接触过的任何一个对象。
2.
Tip:在函数对象中也存在__proto__属性,但是查看函数对象的原型还是要使用prototype 。
JavaScript 在创建对象的时候,无论是普通对象还是函数对象,都存在一个属性__proto__,
JavaScript 的原型链 和继承主要依赖于__proto__
我们可以通过__proto__ 和 prototype的结合 查看原型的每一个层级,也就是原型链。
Tip:在js中,原型和原型链是实现继承的一种模型。
X.a();
当我们调用一个对象的属性或者方法的时候,系统会查询这个对象,如果这个对象中不存在这个方法,就会向上一层查询,如果上一层还是没有这个属性或者方法,就继续沿着原型链去找,一直找到原型的最顶端,object 的上一层 null才会停止。
3.简单的继承
var a = { x : 1, y : 2 } var b = { z : 3, w : 4 } b.__proto__ = a;//b的原型是a,b继承a console.log(b); console.log(b.x);
4.create创建对象的一种方式
var a = Object.create({x:1}); console.log(a.__proto__);//{x:1} var b = Object.create(null); console.log(b);//Object No Properties var e = "hello"; console.log(e.__proto__);//String {length: 0, [[PrimitiveValue]]: ""} var dd = Object.create(Object.prototype); console.log(dd); console.log(dd.__proto__);
5.constructor 属性返回对创建此对象的数组函数的引用。
var a = 10; console.log(a.constructor);//function Number var b = "hello"; console.log(b.constructor);//function String
6.继承
/* 需求:让我们新创建对象a 能够同时拥有 Show对象和 SHow对象原型的方法和属性。 TIp:需要明白:js的原型是可以更改的。 实现思路: 我们要通过更改原型的方式来实现继承。 Why? 因为js中的机制是:对象会从原型无条件的继承属性和方法。 我们才去将a对象的原型重新赋值为实例化后的show对象。 */ function Show(){ this.getName = function (name){ alert(name);//爸爸 } } Show.prototype.getAge = function (age){ alert(age);//爷爷 } // console.log(Show); // console.log(Show.prototype); var a = {};//干儿子 object function Obejct a.__proto__ = new Show();//如果采用这种方式去实现继承的话,会发现, //a原型的构造函数和本身的构造函数被破坏了,那么这种情况是不利用开发的 //容易出现不可预知的错误,所以,我们在下一步,要将a原型的构造函数改为a本身也就是obejct。 // console.log(a.constructor); a.__proto__.constructor = a; // a.getName('dav'); // a.getAge(10); console.log(a); console.log(a.__proto__); console.log(a.__proto__.constructor); // a.__proto__ = Show.prototype; // a.getAge(2); // a.getName('dav');
7.继承
/* m 对象 n对象 k对象 需要k对象拥有m对象和 n对象的属性和方法 */ function m () { this.showM = function (){ alert('this is M') } } function n() { this.showN = function (){ alert('this is N'); } } function k() { } n.prototype = new m(); n.prototype.constructor = n; k.prototype = new n(); k.prototype.constructor = k; var boo = new k(); boo.showM(); boo.showN();
8.跳过继承过来的属性或方法
var a = { x:1, y:2 } var b ={ a :3, c:4 } b.__proto__ = a; console.log(b); for(var i in b) { if(!b.hasOwnProperty(i)){//能够将继承过来的属性或者方法跳过,不去遍历出来 continue; } else { document.write(b[i] + '<br/>') } }
成功的花 ,人们只惊慕她现时的明艳! 然而当初她的芽儿 ,浸透了奋斗的泪泉 ,洒遍了牺牲的血雨。