知识点:构造函数;构造函数—扩展;原型规则和示例;原型链;instanceof
构造函数:
- 用大写字母开头来命名(Foo),写代码时也要遵循这个规范
- 基于一个构造函数可以 new 出很多的函数,类似于模板的这样一个机制
- new 一个构造函数返回一个对象的过程:
- new 时把参数传进去(也可以不传参)
- new 这个函数时,函数里的 this 会变成空对象
- 用 this. 为属性赋值,再把 this 给 return 回来(这个 return 是默认的)
- 赋值给 f,此时 f 具有 f.name f.age f.class
function Foo(name, age) {
this.name = name
this.age = age
this.class = 'class-1'
// return this // 默认有这一行
}
var f = new Foo('zhangsan', 20)
// var f1 = new Foo('lisi', 22) // 创建多个对象
构造函数-扩展:
- var a = {} 其实是 var a = new Object() 的语法糖
- var a = [] 其实是 var a = new Array() 的语法糖
- function Foo(){...} 其实是 var Foo = new Function(...) 的语法糖
- 使用 instanceof 判断一个函数是否是一个变量的构造函数
- 判断一个变量是否为“数组”:变量 instanceof Array
原型规则和示例:(5 条原型规则;原型规则是学习原型链的基础)
- 所有的引用类型(数组、对象、函数),都具有对象特性,即可自由扩展属性(除了
null以
外) - 所有的引用类型(数组、对象、函数),都有一个
__proto__(隐式原型)
属性,属性值是一个普通的对象 - 所有的函数,都有一个
prototype(显式原型)
属性,属性值也是一个普通的对象 - 所有的引用类型(数组、对象、函数),
__proto__
属性值指向它的构造函数的prototype
属性值 - 当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去它的
__proto__
(即它的构造函数的prototype
)中寻找
var obj = {}; obj.a = 100;
var arr = []; arr.a = 100;
function fn () {}
fn.a = 100;
console.log(obj.__proto__);
console.log(arr.__proto__);
console.log(fn.__proto__);
console.log(fn.prototype)
console.log(obj.__proto__ === Object.prototype)
// 构造函数
function Foo(name, age) {
this.name = name
}
Foo.prototype.alertName = function () {
alert(this.name)
}
// 创建示例
var f = new Foo('zhangsan')
f.printName = function () {
console.log(this.name)
}
// 测试
f.printName()
f.alertName() // f 的隐式原型指向了 Foo 的显式原型
补充两点:
- 【 this 】f 通过对象的属性来执行函数的时候,无论函数是自身的属性还是函数从它的原型中得到的属性,this 永远指向函数自身(即:所有的从原型或者更高级的原型中得到、执行的方法,其中的
this
在执行时,就指向了当前这个触发事件执行的对象。因此printName
和alertName
中的this
都是f)
- 【循环对象自身的属性】alertName 不是函数 f 本身自带的属性,但在遍历的时候会遍历到,所以为了防止遍历,需要加一个判断(如下图)
// 如何判断一个这个属性是不是对象本身的属性呢?使用hasOwnProperty,常用的地方是遍历一个对象的时候
var item
for (item in f) {
// 高级浏览器已经在 for in 中屏蔽了来自原型的属性,但是这里建议大家还是加上这个判断,保证程序的健壮性
if (f.hasOwnProperty(item)) {
console.log(item)
}
}
原型链:
// 构造函数
function Foo(name, age) {
this.name = name
}
Foo.prototype.alertName = function () {
alert(this.name)
}
// 创建示例
var f = new Foo('zhangsan')
f.printName = function () {
console.log(this.name)
}
// 测试
f.printName()
f.alertName()
// 比上一个例子多这一行
f.toString() // 要去 f._proto_._proto_ 中查找
- 因为
f
本身没有toString()
,并且f.__proto__
(即Foo.prototype
)中也没有toString
- 当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去它的
__proto__
(即它的构造函数的prototype
)中寻找 - 如果在
f.__proto__
中没有找到toString
,那么就继续去f.__proto__.__proto__
中寻找,因为f.__proto__
就是一个普通的对象而已 - 这样一直往上找,你会发现是一个链式的结构,所以叫做“原型链”
- 直到找到最上层都没有找到,那么就宣告失败,返回
undefined
- 最上层是什么 ————
Object.prototype.__proto__ === null
(方框为构造函数,圆角框为对象)
注:Object.prototype 指向的是 null,这是一个特例,js 避免死循环做的特例
instanceof:用于判断引用类型属于哪个构造函数的方法
(用上面的代码)
- f instanceof Foo 的判断逻辑是:
- f 的 _proto_ 一层一层往上,能否对应到 Foo.prototype
- f instanceof Object 的判断逻辑是:
- 判断 f 的原型一层一层往上,能否对应到
Object.prototype
- 判断 f 的原型一层一层往上,能否对应到