javascript面向对象理解的补充

时间:2023-03-09 03:59:37
javascript面向对象理解的补充
<html>
<head>
<title>js inherit demo</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0" max-age="0">
</head>
<body>
<h4>js inherit demo</h4>
</body>
<script type="text/javascript"> //js有两种对象,一种是函数对象,一种是普通对象
//函数对象有__proto__和prototype两种属性,而普通对象只有__proto__属性
//js引擎基于__proto__的递归查找是所有js继承的核心!!!,因此也称为基于原型链的继承方式 /*
* 当创建一个function时,做了几件事情
* 1、创建了一个普通对象base
*- 2、创建了一个对应的原型变量@base
* 3、普通对象中的prototype指针指向原型变量
* 4、原型变量@base中的constructor指针(构造函数)指向base
*/
var base = function(){
base.prototype.name = 'hello';
this.password = 'fredric'; console.log('do base constructor');
} console.log(base.prototype.constructor == base); //true console.log(base.prototype);
console.log(base.__proto__); //此时b是一个object而非base
//普通对象只有__proto__属性指向其原型链
var b = new base(); //do constructor /*
* 1、创建一个空的obj
* 2、将__proto__绑定到对象的原型,即base.prototype
* 3、执行base函数
*/
b.age = 4;
console.log(b.__proto__ == base.prototype); //true
console.log(b.__proto__.name == b.name); //true
console.log(b.password);
//此时b本身没有name属性,于是js引擎会到b的__proto__里去找,如此往复,因此实现了继承的效果
//如下:b.__proto__.__proto__.name
console.log(b); //第二种继承的方式
var extend = function(){
console.log('do extend constructor');
}
console.log(extend.prototype.constructor == extend); //true //执行顺序如下:
//1. 创建一个空的obj赋值给extent.prototype
//2. extend.prototype.__proto__指向base.prototype
//3. 执行base函数,即打印do base constructor
extend.prototype = new base();
console.log(extend.prototype.__proto__ == base.prototype); //true var e = new extend(); console.log(e.__proto__ == extend.prototype); //true
console.log(e); </script> </html>