什么是原型对象?
1)所有的构造函数在初始化的时候,都会自动创建出一个特殊的实例化对象,构造函数的prototype指向的就是该对象,该对象被称为原型对象,或者prototype.
2)prototype属性:所有的构造函数new出来的实例化对象,都会有一个prototype属性,这个prototype属性指向的就是构造函数的原型对象(内存地址)
3)原型对象是为了实现继承
4)如果想要在构造函数中创建一个方法,我们需要将这个方法放到原型中,这样的好处是所有被创建出来的实例化对象使用的同一个原型方法,大大减少了内存地址的占用.
什么是原型链?
1)调用属性和方法的时候,先去构造函数中查找,如果没有,会沿着prototype属性的内存地址,在原型对象中查找有没有对应的方法.
2)由prototype属性串联起来的原型对象,就称为是原型链
原型链的意义
实例化对象中访问属性和方法的时候，先访问自身的属性和方法，本身不存在，则会通过prototype属性，再整个原型链上查找，如果整个都查找不到就会报错
new的四个阶段
创建一个空的实例化对象
让构造函数中的this指向空的实例化对象
执行（调用）构造函数，从而创建实例化对象自身的属性和方法
返回实例化对象
this指向案例
<title>Document</title>
<style>
#div1 div {
width: 300px;
height: 100px;
border: 1px solid #f00;
display: none;
}
.active {
background-color: #f00;
color: #fff;
}
</style>
</head>
<body>
<div id="div1">
<input class="active" type="button" name="" id="" value="歌星" />
<input type="button" name="" id="" value="诗人" />
<input type="button" name="" id="" value="作家" />
<input type="button" name="" id="" value="囚犯" />
<div style="display: block">林俊杰，周杰伦</div>
<div>李白，杜甫</div>
<div>朱自清，鲁迅</div>
<div>刘万令</div>
</div>
</body>
<script>
function tab(inpddd, divsddd) {
var _this = this;
//将this存放在变量中.此时的this指向是tab
//new后的this指向就是new出来的实例化对象本身,简单来说,谁new我,我就是谁
this.inp = inpddd;
this.divs = divsddd;
for (let i = 0; i < this.inp.length; i++) {
this.inp[i].addEventListener("click", function () {
//点击事件调用原型方法
_this.huan(i);
//在事件中this指向的是绑定事件的元素本身,直接使用this是调用不到原型方法huan的,要想调用tab下的原型方法,就使用上面存放的变量来提供this指向
});
}
}
tab.prototype.huan = function (tou) {
for (var j = 0; j < this.inp.length; j++) {
this.inp[j].className = "";
this.divs[j].style.display = "none";
// console.log(j);0,1,2
}
this.inp[tou].className = "active";
//这里的下标不可使用j,因为i与j嵌套,j又是点击事件触发后才开始循环,结果是012,我们想要的是上面的第一层循环i的值,所以以传参方式实现
this.divs[tou].style.display = "block";
};
var inpddd = document.querySelectorAll("input");
var divsddd = document.querySelectorAll("#div1 div"); //获取
var tab1 = new tab(inpddd, divsddd); //传递
</script>
