原型
任何函数都有一个prototype属性 它是一个对象 原型对象
只不过原型对普通函数没有多大意义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
/* 任何函数都有原型 普通函数原型没什么用
function fun() {
alert("hehe");
}
console.log(typeof fun.prototype);
*/
function People(name) {
this.name = name;
}
console.log(People.prototype);//{constructor: ƒ}
People.prototype = {
constructor: People,
name: "kaola",
sex: "nan",
say: function() {
alert("yaya");
}
};
console.log(People.prototype);
// new出一个对象 不仅仅执行构造函数的语句 同时也会把这个对象的__proto__属性指向了构造函数的prototype
var xh = new People("xiaohong");
var xm = new People("xiaoming");
console.log(xh.name); // "xiaohong"
console.log(xh.age);
console.log(xh.__proto__ === xm.__proto__);
xh.say();
xm.say();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function Student(name, sex, age) {
this.name = name;
this.sex = sex;
this.age = age;
}
function fn() {
alert("123");
}
Student.prototype.study = function() {
alert("好好学习 天天向上");
}
var s1 = new Student("zs", "男", 17); //例如 name,age,sex这些都是每new一个对象需要赋值的。是这个对象私有的。
var s2 = new Student("zj", "男", 36); //原型中的相当于这个对象公有的方法。每个对象都能调用。
s1.study(); // 通过Student构造函数创建的对象 可以使用Student.prototype中的成员
s2.study();
console.dir(s1.__proto__ === Student.prototype); // true
console.log(s1.study === s2.study); // true
console.log(s1.study === Student.prototype.study); // true
console.dir(Student.prototype.constructor);
console.dir(Student.prototype.constructor === s1.constructor); // true
/*
构造函数 实例 原型
属性prototype
构造函数Student -------------->Student.prototype
|| {...,study:function{},constructor:Student}
|| new |^
|| ||
|| || __proto__
Student实例如s1,s2------------------
*/
console.log("===============================================================");
var arr = []; // new Array()
console.log(arr.__proto__ === Array.prototype);
console.log(arr.constructor === Array);
</script>
</body>
</html>
回顶层目录
原型链
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>原型链</title>
</head>
<body>
<script>
function Student(name, sex) {
this.name = name;
this.sex = sex;
this.study = function() {
alert("haha"); //如果对象内封装函数,会调用自己的函数,而不会去调用prototype的函数。
}
}
Student.prototype.study = function () {
alert("good good study day day up");
}
Student.prototype.class = "01";
var s1 = new Student("zs", "nan"); // {name:"zs",sex:"nan",__proto__:{}}
var s2 = new Student("lisi", "nv"); // {name: "lisi",sex:"nv"}
s1.study();
</script>
</body>
</html>
回顶层目录
属性对象的查找方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
function Student(name,sex){
this.name = name;
this.sex = sex;
}
Student.prototype.study = function(){
alert("阳光明媚!!!");
}
Student.prototype.class = "01";
var s1 = new Student("Brain","man");
var s2 = new Student("Danny","woman");
console.log("s1.__proto__.__proto__ === Object.prototype:");
console.log(s1.__proto__.__proto__ === Object.prototype);
console.log("\ns1.__proto__.__proto__:");
console.log(s1.__proto__.__proto__);
console.log("\ns1.__proto__:");
console.log(s1.__proto__);
console.dir(s1);
// s1.study();
</script>
</body>
</html>
回顶层目录
原型的注意事项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
function Student(name,sex) {
this.name = name;
this.sex = sex;
}
//添加原型属性的方法一:
/*
Student.prototype.study = function () {
alert("good good study day day up");
}
Student.prototype.eat = function() {
}
*/
//方法二:
Student.prototype = {
constuctor: Student,//重点注意: 重新设置prototype时候 需要手动添加constructor
study: function() {
},
eat: function() {
}
}
var s1 = new Student("zs","nan");
console.log(s1.constuctor);
</script>
</body>
</html>
回顶层目录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var arr = [1, 2, 3, 4, 5];// new Array()
var arr2 = [10, 20, 30];
/* 方法定义在原型上*/
Array.prototype.getSum = function() {
var sum = 0;
for(var i=0; i<this.length; i++) {
sum += this[i];
}
return sum;
}
// 修改Array或String的prototype是无效的 原因是对原来的原型对象保护
/* Array.prototype = {
getSum: function () {
var sum = 0;
for (var i = 0; i < this.length; i++) {
sum += this[i];
}
return sum;
}
} */
var res = arr2.getSum();
alert(res);
</script>
</body>
</html>