JS的原型链练习

案例一：

<script>
    		function Kedou() {
				this.life = 1
				this.tail = 1
			}

			var k1 = new Kedou()//{__proto__:{},life = 1,tail = 1}
            k1.age = 10
			function Qingwa() {
				this.tui = 4
				this.yanjing = 2
			}
			Qingwa.prototype = new Kedou() //指定new Qingwa()的原型对象为new Kedou()
			var q1 = new Qingwa() //{__proto__:{life = 1,tail = 1},yanjing = 2,tui = 4}
			console.log(q1.life) // 1 对象中没有，到对象模型中取值

			//k1是不是q1原型对象?//不是
			console.log(q1.__proto__ == k1)//验证
            //原因：q1的对象模型是new Kedou()，不是k1,他们是两个对象，具有相似的结构。

			//k1和q1有什么关系?
			// k1的原型对象是q1的原型对象的原型对象
			console.log(k1.__proto__ === q1.__proto__.__proto__) //true
			
			//q1.age
			console.log(q1.age) //undefined
</script>

案例二：

<script>
    	function Element(){
				 this.width="20px"
				 this.color="red"
				 this.fontSize="20px"
			}
			function  Div() {
				this.value=123
				this.innerHTML="hello"
			}
			var el=new Element() //通过Element构造函数创建el对象
			el.height="40px" // 为el添加height属性
			
			Div.prototype=el //执行以后 用Div创建的对象有Element创建的对象的功能
             //Div.prototype指向Div创建的对象的对象模型
			var div1=new Div() //通过Div构造函数创建div1对象
			div1.className="box"//为div1添加className属性
			console.log(div1.value,div1.innerHTML,div1,div1.width)
			//123 "hello" {value:123,innerHTML="hello",className:"box"} "20px"
			var div2=new Div()
			console.log(div2.value,div2.innerHTML,div2,div2.width)
			//123 "hello" {value:123,innerHTML="hello",className:"box"} "20px"
			
			console.log(div2.className,div2.height,div1.height,div1.className)
            //undefined(className加在div1对象里面，而非对象模型中，所以div2无法访问到) 
            //"40px" "40px" "box"
</script>

案例三

        

<script>
    	//对象和函数的关系(常常出现的笔试题的选择题中)
			Object.prototype.life=1//以后用Object创建的对象的原型对象有life属性1
			Function.prototype.life=2
            //声明一个函数
			function fn () {
				this.name="karen"
			}
			//fn.prototype={} ==>Object.prototype
			 //标准创建 var fn=new Function('this.name="karen";')
             //fn.__proto__ = Function.prototype
			 var f1=new fn()
            //f1.__proto__ = Object.prototype
			console.log(f1.name,f1.life)//"karen" 1 
			console.log(fn.life,fn.name)//2  fn
</script>

案例四

<script>
    Object.prototype.life=1
			function fn () {
				this.name="karen"
			}				
			var f1=new fn()
			console.log(f1.life)//1  fn.prototype=new Object()   Object.prototype
			
			console.log(fn.life)//1  Function.prototype=fn的原型对象==>Object.protype
</script>

案例四

	<script>
			Function.prototype.life=1//所有的函数的原型对象有life=1
			function fn () {
				this.name="karen"
			}
            //fn.__proto__=	Function.prototype
            //fn.prototype = {}			
			var f1=new fn()
            //f1={__proto__:{},name="karen"}
			console.log(fn.life)//1
			console.log(f1.life)//undefined		
			
			
		</script>