知识点：
--什么是构造函数？
--原型规则
--原型链
--instanceof
上来先贴一段代码
<script>
function Foo (name,age) {
this.name = name;
this.age = age;
}
Foo.prototype.showInfo = function (){
console.log(this.name + ' ' + this.age);
}
var f = new Foo('张三', 23);
f.eat = function (){
console.log('正在吃...');
}
f.eat();
// 正在吃...
//调用了自身的 eat 方法
console.log(f.hasOwnProperty('eat')); // true 判断 eat 是否是自身的属性/方法
f.showInfo();
// 张三 23
// 调用了f.__proto__ (即 Foo.prototype) 的 showInfo 方法, f.__proto__ === Foo.prototype
console.log(f.hasOwnProperty('showInfo')); // false 判断 showInfo 是否是自身的属性/方法
console.log(f.toString());
// [object Object]
// 调用了 f.__proto__.__proto__ 即(Object) 的 toString 方法
</script>
1. 什么是构造函数？
1、构造函数也是一个普通函数，创建方式和普通函数一样，但构造函数习惯上首字母大写
2、构造函数和普通函数的区别在于：调用方式不一样
3、普通函数的调用方式：直接调用 fn();
4、构造函数的调用方式：需要使用new关键字来调用 new Fn();
5、构造函数的执行流程
A、立刻在堆内存中创建一个新的对象
B、将新建的对象设置为函数中的this
C、逐个执行函数中的代码
D、将新建的对象作为返回值
原文：https://blog.csdn.net/darcyxz/article/details/79370084
例子中的 Foo 就是一个构造函数，而 f 就是 Foo 一个实例
再看这些：
- var a = {} 是var a = new Object() 的语法糖
- var a = [] 是var a = new Array() 的语法糖
- function Foo () {} 是 var Foo = new Function () 的语法糖
也就是说，Object Array Function 就是构造函数，而 a 就是它们的一个实例
2. 原型规则
(1) 所有的引用类型(数组、对象、函数)，都具有对象特性，即可自由扩展属性，null 除外。
var obj = {};
obj.a = 100;
var arr = [];
arr.b = 100;
var fn = function (){};
fn.c = 100;
var nObj = null;
nObj.d = 100; // 报错
(2) 所有的引用类型（数组、对象、函数），都有一个 __proto__ 属性，属性值是一个普通的对象。
(3) 所有的函数，都有一个 prototype 属性，属性值也是一个普通的对象。
约定 __proto__ 为隐式原型，prototype 为显式原型
(4) 所有的引用类型(数组、对象、函数)，__proto__ 属性值指向它的构造函数的 prototype 属性值，
在代码例子中，有 f.__proto__ === Foo.prototype // true
(5) 当试图得到一个对象的某个属性，如果这个对象本身没有这个属性，那么它就会去它的 __proto__ 即 它的构造函数的 prototype 属性值 中去寻找。
这点对应代码例子中
f.showInfo();
// 张三 23
// 调用了f.__proto__ (即 Foo.prototype) 的 showInfo 方法, f.__proto__ === Foo.prototype
console.log(f.toString());
// [object Object]
// 调用了 f.__proto__.__proto__ 即(Object) 的 toString 方法
注： 可以使用 hasOwnProperty() 方法来判断是否是自身的属性
console.log(f.hasOwnProperty('eat')); // true 判断 eat 是否是自身的属性/方法
console.log(f.hasOwnProperty('showInfo')); // false 判断 showInfo 是否是自身的属性/方法
3. 原型链
再贴一遍刚刚贴过的代码，方便看
<script>
function Foo (name,age) {
this.name = name;
this.age = age;
}
Foo.prototype.showInfo = function (){
console.log(this.name + ' ' + this.age);
}
var f = new Foo('张三', 23);
f.eat = function (){
console.log('正在吃...');
}
f.eat();
// 正在吃...
//调用了自身的 eat 方法
console.log(f.hasOwnProperty('eat')); // true 判断 eat 是否是自身的属性/方法
f.showInfo();
// 张三 23
// 调用了f.__proto__ (即 Foo.prototype) 的 showInfo 方法, f.__proto__ === Foo.prototype
console.log(f.hasOwnProperty('showInfo')); // false 判断 showInfo 是否是自身的属性/方法
console.log(f.toString());
// [object Object]
// 调用了 f.__proto__.__proto__ 即(Object) 的 toString 方法
</script>
image.png
4. instanceof
用于判断引用类型属于哪个构造函数的方法，
instanceof 的判断逻辑:
通过 __proto__ 一层一个层往上找,
var obj = {};
console.log(obj instanceof Object); // true
var arr = [];
console.log(arr instanceof Array); // true
console.log(arr instanceof Object); // true
var fn = function (){};
console.log(fn instanceof Function); // true
console.log(fn instanceof Object); // true
以上为学习笔记，参考来源：慕课网的课程
网友评论