前言
proto 对象的原型
prototype 原型对象
只要是对象 都有 proto
一、利用构造函数创建对象
创建对象的三种方式:
- 字面量方式
- new 关键字
- 借用构造函数
new执行做的四件事情:
- 在内存中创建一个新的空对象。
- 让 this 指向这个新的对象。
- 执行构造函数里面的代码，给这个新对象添加属性和方法。
- n返回这个新对象（构造函数里面不需要 return ）。
<script>
// 1. 利用 new Object() 创建对象
var obj1 = new Object();
// 2. 利用 对象字面量创建对象
var obj2 = {};
// 3. 利用构造函数创建对象
function Star(uname, age) {
this.uname = uname;
this.age = age;
this.sing = function() {
console.log('我会唱歌');
}
}
var ldh = new Star('刘德华', 18)；
var zxy = new Star('张学友', 19);
console.log(ldh);
ldh.sing();
zxy.sing();
</script>二、原型对象和对象的原型
1.prototype 原型对象
每一个构造函数都有一个 prototype 属性，指向另一个对象。这个 prototype 就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有。
它是为了解决构造函数存在浪费内存的问题，达到资源共享。
<script>
// 1. 构造函数的问题.
function Star(uname, age) {
this.uname = uname;
this.age = age;
// this.sing = function() {
// console.log('我会唱歌');
// }
}
Star.prototype.sing = function() {
console.log('我会唱歌');
}
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 19);
console.log(ldh.sing === zxy.sing);
// console.dir(Star);
ldh.sing();
zxy.sing();
// 2. 一般情况下,我们的公共属性定义到构造函数里面, 公共的方法我们放到原型对象身上
</script>2.proto 对象的原型（对象原型）
- 实例对象原型：实例对象有一个属性 proto 指向构造函数的 prototype 原型对象。
- 实例对象原型__proto__和构造函数的prototype是等价的。
- 方法的查找规则：首先先看对象身上是否有方法,如果有就执行这个对象上的方法，如果么没有这个方法,因为有__proto__ 的存在,就去构造函数原型对象prototype身上去查找方法。
<script>
function Star(uname, age) {
this.uname = uname;
this.age = age;
}
Star.prototype.sing = function() {
console.log('我会唱歌');
}
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 19);
ldh.sing();
console.log(ldh); // 对象身上系统自己添加一个 __proto__ 指向我们构造函数的原型对象 prototype
console.log(ldh.__proto__ === Star.prototype); //返回true
// 方法的查找规则: 首先先看ldh 对象身上是否有 sing 方法,如果有就执行这个对象上的sing
// 如果么有sing 这个方法,因为有__proto__ 的存在,就去构造函数原型对象prototype身上去查找sing这个方法
</script>3.原型对象和对象的原型里面的constructor
- 实例对象原型（__proto__）和构造函数原型对象（prototype）里面都有一个属性 constructor 属性 ，constructor 我们称为构造函数，因为它指回构造函数本身。
constructor: ƒ Star(uname, age)
arguments: null
caller: null
length: 2
name: "Star"- 一般情况下，对象的方法都在构造函数的原型对象中设置。如果有多个对象的方法，我们可以给原型对象采取对象形式赋值，但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor 就不再指向当前构造函数了。此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数。
<script>
function Star(uname, age) {
this.uname = uname;
this.age = age;
}
// 很多情况下,我们需要手动的利用constructor 这个属性指回 原来的构造函数
// Star.prototype.sing = function() {
// console.log('我会唱歌');
// };
// Star.prototype.movie = function() {
// console.log('我会演电影');
// }
Star.prototype = {
// 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数。如果不手动设置的话，会让js以为你要把Star.prototype = {} 变成一个普通的对象。不再是构造函数
constructor: Star,
sing: function() {
console.log('我会唱歌');
},
movie: function() {
console.log('我会演电影');
}
}
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 19);
console.log(Star.prototype);
console.log(ldh.__proto__);
console.log(Star.prototype.constructor);
console.log(ldh.__proto__.constructor);
</script>三、原型链和原型对象三角关系
1.三角关系
- prototype:每一个构造函数都有一个prototype属性,指向的是该构造函数的原型对象。
- __proto__:每一个实例对象都有一个__proto__属性,指向构造函数的原型对象。
- constructor:实例对象原型__proto__和构造函数prototype原型对象里面都有一个属性 constructor 属性 ，都指向了构造函数。
关系:
- 构造函数的prototype属性指向了构造函数原型对象。
- 实例对象是由构造函数创建的,实例对象的__proto__属性指向了构造函数的原型对象。
-
构造函数的原型对象的constructor属性指向了构造函数,实例对象的原型的constructor属性也指向了构造函数。
<script> function Star(uname, age) { this.uname = uname; this.age = age; } Star.prototype.sing = function() { console.log('我会唱歌'); } var ldh = new Star('刘德华', 18); // 1. 只要是对象就有__proto__ 原型, 指向原型对象 console.log(Star.prototype); console.log(Star.prototype.__proto__ === Object.prototype); //返回true // 2.我们Star原型对象里面的__proto__原型指向的是 Object.prototype console.log(Object.prototype.__proto__); // 3. 我们Object.prototype原型对象里面的__proto__原型 指向为 null </script>
三角关系图示
2.原型链
知识总结
- 每一个实例对象又有一个__proto__属性，指向的构造函数的原型对象，构造函数的原型对象也是一个对象，也有__proto__属性，这样一层一层往上找就形成了原型链。
代码
<script>
function Star(uname, age) {
this.uname = uname;
this.age = age;
}
Star.prototype.sing = function() {
console.log('我会唱歌');
}
var ldh = new Star('刘德华', 18);
// 1. 只要是对象就有__proto__ 原型, 指向原型对象
console.log(Star.prototype);
console.log(Star.prototype.__proto__ === Object.prototype);
// 2.我们Star原型对象里面的__proto__原型指向的是 Object.prototype
console.log(Object.prototype.__proto__);
// 3. 我们Object.prototype原型对象里面的__proto__原型 指向为 null
</script>原型链图示
三、对象成员查找规则、原型对象this指向和为内置对象添加方法
1.对象成员查找规则
- 当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。如果没有就查找它的原型（也就是__proto__指向的 prototype 原型对象）。如果还没有就查找原型对象的原型（Object的原型对象）。依此类推一直找到 Object 为止（null），按照原型链的方式去查找。
- 可总结为就近原则
2.原型对象this指向
<script>
function Star(uname, age) {
this.uname = uname;
this.age = age;
}
var that;
Star.prototype.sing = function() {
console.log('我会唱歌');
that = this;
}
var ldh = new Star('刘德华', 18);
// 1. 在构造函数中,里面this指向的是对象实例 ldh
ldh.sing();
console.log(that === ldh); //返回true
// 2.原型对象函数里面的this 指向的是 实例对象 ldh
</script>3.为内置对象添加方法
- 为内置对象数组添加求和的方法，使用
Array.prototype.sum = function(){}添加方法 - 方法内部书写求和的逻辑代码
- 最终将求和结果return
<script>
// 原型对象的应用 扩展内置对象方法
Array.prototype.sum = function() {
var sum = 0;
for (var i = 0; i < this.length; i++) {
sum += this[i];
}
return sum;
};
var arr = [1, 2, 3];
console.log(arr.sum());
console.log(Array.prototype);
var arr1 = new Array(11, 22, 33);
console.log(arr1.sum());
</script>以下这种方式不可取！！ 会覆盖原生的内置对象
// Array.prototype = {
// sum: function() {
// var sum = 0;
// for (var i = 0; i < this.length; i++) {
// sum += this[i];
// }
// return sum;
// }
// }## 四、重点回顾
记住并理解一张图即可
你的点赞 是我的动力 谢谢。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。