首先,约定俗成,构造函数首字母要大写。在ES6中,被定义为一个类。
原型规则所有的引用类型(数组、对象、函数),都具有对象特性,即可自由扩展属性(“null”除外);
所有的引用类型(数组、对象、函数),都有一个__proto__属性,属性值是一个普遍的对象;
所有的函数,都有一个prototype属性,属性值也是一个普通的对象;
__proto__属性值指向它的构造函数的prototype属性值;var obj = {} // 实际是 var obj = new Object() 的语法糖
obj.a = 100
console.log(obj.__proto__)
console.log(obj.__proto__ === Object.prototype) // 实例对象obj的__proto__ === 它的构造函数Object的prototype
function fn () {}
console.log(fn.prototype) __proto__(即它的构造函数的prototype)中寻找。// 构造函数
function Foo(name, age) {
this.name = name
}
Foo.prototype.alertName = () => {
alert(this.name)
}
// 示例
let f = new Foo('evan')
f.printName = () => {
console.log(this.name)
}
// 测试
f.printName()
f.alertName() // 自身没有alertName这个属性,那么就往它__proto__上找,也就是它的构造函数Foo的prototype上找 for in 上面的例子中,如果用for in循环,能拿到f的三个属性:name、printName、alertName,当然这个不是我们希望的:
let item
for (item in f) {
if (f.hasOwnProperty(item)) { // 保障程序的健壮性
console.log(item)
}
} 原型链 // 构造函数
function Foo(name, age) {
this.name = name
}
Foo.prototype.alertName = () => {
alert(this.name)
}
// 示例
let f = new Foo('evan')
f.printName = () => {
console.log(this.name)
}
// 测试
f.printName()
f.alertName() // 自身没有alertName这个属性,那么就往它__proto__上找,也就是它的构造函数Foo的prototype上找
f.toString() // 要去 f.__proto__.proto__ 中查找, )
用于判断引用类型属于哪个构造函数的方法
那么 f instanceof Foo的判断逻辑:
f的__proto__一层层往上,能否对应到Foo.prototype
f instanceof Object,也是true。所以,判断是否为数组,可以用instanceof,不能用typeof。
var arr = []
arr instanceof Array // true 创建一个新对象
this指向这个新对象
执行代码,即对this赋值
this
function Foo (name, age) {
this.name = name
this.age = age
// return this // 默认语句
}
var f = new Foo('evan', 26) // 封装一个DOM查询的工具
function Elem (id) {
this.elem = document.getElementById(id)
}
Elem.prototype.html = function (val) {
var elem = this.elem
if (val) {
elem.innerHTML = val
return this // 链式操作
} else {
return elem.innerHTML
}
}
Elem.prototype.on = function (type, fn) {
var elem = this.elem
elem.addEventListener(type, fn)
return this // 链式操作
}
let div1 = new Elem('app')
// console.log(div1.html()) // 找个一有id的页面,把这段粘贴到console
// div1.html('Hello World
')
// div1.on('click', function () {
// alert('clicked')
// })
div1.html('Hello World
').on('click', function () {
alert('clicked')
}).html('return this 进行链式操作
') 来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/756/viewspace-2810022/ ,如需转载,请注明出处,否则将追究法律责任。