- 原型链:实例对象和原型对象之间的关系是通过__proto__原型来联系起来的,这个关系就是原型链
- 原型链以及原型之间的指向是否可以改变?
- 实例对象的原型__proto__指向的是该对象所在构造函数的原型对象prototype
- 构造函数的原型对象prototype指向如果改变了,实例对象的原型的指向也会发生改变
原型最终指向了哪里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function Person() {
}
Person.prototype.eat=function () {
console.log("吃东西");
};
var per=new Person();
console.dir(per);
console.dir(Person);
console.log(per.__proto__==Person.prototype);//true
console.log(per.__proto__.__proto__==Person.prototype.__proto__);//true
console.log(Person.prototype.__proto__==Object.prototype);//true
console.log(Object.prototype.__proto__);//null
</script>
</body>
</html>
/*
* 实例对象中有一个__proto__原型
* 构造函数中有一个prototype原型
* prototype是对象,所以prototype中也有__proto__对象,那么指向哪里?
* 实例对象中的__proto__指向的是构造函数的prototype
* 所以,prototype这个对象中的__proto__也应该是指向某个构造函数的prototype
* per实例对象的__proto__---->Person.prototype
* Person.prototype的__proto__---->Object.prototype的__proto__也就是[null]
* */
原型指向改变如何添加方法和访问
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//人的构造函数
// function Person(age) {
// this.age=age;
// }
// //人的原型中添加方法
// Person.prototype.eat=function () {
// console.log("人正在吃东西");
// };
// //学生构造函数
// function Student(sex) {
// this.sex=sex;
// }
// //学生的原型中添加方法----先在原型中添加方法
// Student.prototype.sayHi=function () {
// console.log("您好哦");
// };
// //改变了原型对象的指向
// Student.prototype=new Person(10);
// var stu=new Student("男");
// stu.eat();
// stu.sayHi();
function Person(age) {
this.age=age;
}
//人的原型中添加方法
Person.prototype.eat=function () {
console.log("人正在吃东西");
};
//学生构造函数
function Student(sex) {
this.sex=sex;
}
//先改变了原型对象的指向
Student.prototype=new Person(10);
//再在学生的原型中添加方法
Student.prototype.sayHi=function () {
console.log("您好哦");
};
var stu=new Student("男");
stu.eat();
stu.sayHi();
</script>
</body>
</html>
如果原型指向改变了,那么就应该在原型指向改变之后添加方法
实例对象中的属性和原型对象中的属性重名问题!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function Person(age,sex) {
this.age=age;
this.sex=sex;
}
Person.prototype.sex="女";
var per=new Person(10,"男");
per.sex="人";
console.log(per.sex);//男
console.dir(per);
console.dir(Person);
console.log(per.name);//undefined
</script>
</body>
</html>
/*
* 如果实例对象中的属性和原型对象中的属性发生重名,当实例对象访问这个属性时,
* 应该先从实例对象中找,找到了就直接用,没有找到就去指向的原型对象中找,没有这个属性就是undefined
* 因为js是一门动态类型的语言,对象没有什么,只要点了,那么这个对象就有这个东西;
* 没有这个属性,只要对象.属性名字,对象就有这个属性了,但是,该属性没有赋值,所以,结果是:undefined
*
* 通过实例对象能否改变原型对象中属性的值?是不可以的,只能改变实例对象中属性的值
* 如果非要改变,直接通过原型对象.属性=值;可以改变
* */
一个很神奇的原型链
任何一个对象的最终指向都是null
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="dv"></div>
<script>
var divObj=document.getElementById("dv");
console.dir(divObj);
/*
* divObj.__proto__---->HTMLDivElement.prototype
* HTMLDivElement.prototype的__proto__---->HTMLElement.prototype
* HTMLElement.prototype的__proto__---->Element.prototype
* Element.prototype的__proto__---->Node.prototype
* Node.prototype的__proto__---->EventTarget.prototype
* EventTarget.prototype的__proto__---->Object.prototype
* Object.prototype没有__proto__,所以,Object.prototype中的__proto__是null
* */
</script>
</body>
</html>