35.js--原型链

爱喝珍珠奶茶

已于 2022-07-07 19:44:51 修改

阅读量50

点赞数

分类专栏： JS 文章标签： javascript 前端

于 2022-07-07 09:03:57 首次发布

本文链接：https://blog.csdn.net/m0_63774574/article/details/125651333

版权

JS 专栏收录该内容

48 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

1.构造函数

2.__proto__和prototype的案例

3.自定义构造函数案例

4.构造函数、原型和实例的关系

（1）构造函数、原型和实例的关系

（2）prototype与_proto_的关系

（3）属性搜索

1.构造函数

根据函数的业务分类取了不一样: 构造函数闭包回调事件监听器等等

一般专门用于创建对象的函数就是构造函数

案例1：

function fn(){

this.a=100

}

var f1=new fn()

fn这构造函数的功能是什么? 创建一个有属性a的对象

案例2：

function fn2(){

this.tool=function(){}

}

var f2=new fn2()

var f3=new fn2()

var f4=new fn2()

fn2这构造函数的功能是什么? 创建一个有tool方法的对象

同一个函数创建出来的对象们具有相同的空间结构和功能

每一个函数创建出来的对象是不相同的,有哪些构造函数呢?

a: 1.自定函数 2.官方提供的函数:Function Object String Number Bloolean Array Date Math

例如：var obj1=new Object()

它的语法糖:代码有多种写法时 简便的写法就是语法糖

语法糖: 对象直接量

例如： var obj2={}

console.log(obj1)

2.proto和prototype的案例

案例1：

        	function fn(){				
			 
            } 

			var f1=new fn()
			var arr1=[1,3,4,5]//new Array()
			console.log(arr1.__proto__===Array.prototype)

运行结果：

案例2：

function fn(){

}
			                // fn.prototype=new Object()==>{}
Object.prototype			


var f1=new fn()            //Object
var arr1=[1,3,4,5]
arr1.push()
			              // arr1.__proto__==>Array.prototype==>new Object()
			                console.log(f1.__proto__.__proto__===arr1.__proto__.__proto__,f1.__proto__.__proto__)

运行结果：

案例3：

            var arr1=[1,2,3,4]
			function fn(){
				this.a=100
			}
			fn.prototype=arr1

			var f1=new fn()
			console.log(f1.a,f1.length,f1.push)

注释：
var arr1=[1,2,3,4]//new Array(1,2,3,4)
fn.prototype=arr1//以后fn函数去创建对象的话  对象的原型对象是arr1数组

运行结果：

3.自定义构造函数案例

自定义构造函数的原型对象也是一个自定义构造函数创建的对象

案例1：

         function  Kedou() {
		  	  this.life=1
			  this.tail=1		  
		  }
		  
		  var k1=new Kedou()
		  
		  function  Qingwa () {
		  	   this.tui=4
			   this.yanjing=2
		  }

		  Qingwa.prototype=new Kedou()		  
		  var q1=new Qingwa()
		  console.log(q1.life)

运行结果：

案例2：

           function Element(){
				 this.width="20px"
				 this.color="red"
				 this.fontSize="20px"
			}
			function  Div() {
				this.value=123
				this.innerHTML="hello"
			}
			var el=new Element()
			el.height="40px"
			
			Div.prototype=el         //执行以后 用Div创建的对象有Element创建的对象的功能
			var div1=new Div()
			div1.className="box"
			console.log(div1.value,div1.innerHTML,div1,div1.width)
			
			var div2=new Div()
			console.log(div2.value,div2.innerHTML,div2,div2.width)
			
			
			console.log(div2.className,div2.height,div1.height,div1.className)

运行结果：

4.构造函数、原型和实例的关系

（1）构造函数、原型和实例的关系

      ①构造函数都有一个属性prototype，这个属性是一个对象（Object的实例）

      ②原型对象prototype里面有一个constructor属性，该属性指向原型对象所属的构造函数

      ③实例对象都有一个_proto_属性，该属性也指向构造函数的原型对象，它是一个非标准属性，不可以用于编程，它是用于浏览器自己使用的