ES5原型原型链

11 篇文章 0 订阅
1 篇文章 0 订阅

原型 原型链

如何准确判断一个变量是数组类型
写一个原型链继承的例子
描述new一个对象的过程
zepto(或其他框架)源码中如何使用原型链

知识点

构造函数
  • 构造函数多以大写开头
  • 默认有一行 return this
  • new 执行的时候 先把this变成一个空对象,然后return this
  • 最后赋值给 一个变量
function Foo(name,age){
	this.name = name;
	this.age = age;
	this.class = 'class-1'
	// return this  //默认有这一行 解开注释 和 不解开注释都没所谓
}
var f = new Foo('zhangsan', 20) // new这个函数执行的时候,this先变成一个空对象,然后return this,最后赋值给变量 f 
// var f1 = new Foo('lisi', 21) //创建多个对象
构造函数-扩展

所有的引用类型都有构造函数
推荐前面的书写方式

  • var a = {} 其实是 var a = new Object() 语法糖
  • var a = [] 其实是 var a = new Array() 语法糖
  • function Foo(){…} 其实是 var Foo = new Function(…)
  • 使用instanceof 判断一个函数是否是一个变量的构造函数
    判断一个变量是否为“数组”
var a = [];
a instanceof Array // true
原型规则和示例
  • 所有的引用类型(数组、对象、函数),都具有对象特性,即可自由扩展属性(除了“null” 以外)
  • 所有的引用类型(数组、对象、函数),都有一个_proto_属性,属性值是一个普通的对象(proto 隐式原型,prototype缩写)
  • 所有的函数,都有一个prototype属性,属性值也是一个普通的对象(prototype 是 显式原型)
  • 所有的引用类型(数组、对象、函数),_proto_属性值指向它的构造函数的 “prototype” 属性值
  • 当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去它的_proto_(即它的构造函数的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()//'zhangsan' // this指向f
f.alertName()//'zhangsan' //f通过_proto_指向构造函数Foo.prototype找到alertName  // this指向f
  • 循环对象自身的属性
var item
//高级浏览器已经在 for in 中屏蔽了来自原型的属性
//但是这里建议大家还是加上这个判断,保证程序的健壮性
for(item in f){
	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()//'zhangsan' // this指向f
f.alertName()//'zhangsan' //f通过_proto_指向构造函数Foo.prototype找到alertName  // this指向f
f.toString() // 要去f._proto_.proto_中查找,最后在Object的显示原型(prototype)里找到

Foo、Object 都是构造函数
prototype 显示原型 (本身也是个对象);
proto 隐式原型

_proto_
_proto_
_proto_
f
Foo.prototype
Object.prototype
null
instanceof
  • 用于判断引用类型属于哪个构造函数的方法
  • f instanceof Foo 的判断逻辑是
  • f 的 proto 一层一层往上,能否对应到Foo.prototype
  • 再试着判断 f instanceof Object

解题

如何准确判断一个变量是数组类型
var arr = []
arr instanceof Array //true
typeof arr // Object ,typeof 是无法判断是否是数组的(无法判断引用类型,除Function以外)
写一个原型链继承的例子
//动物
function Animal(){
	this.eat = function () {
		console.log('animal eat')
	}
}
//狗
function Dog () {
	this.bark = function () {
		console.log('dog bark')
	}
}
Dog.prototype = new Animal()//new 出个实例对象,覆盖Dog.prototype对象
//哈士奇
var hashiqi = new Dog()//new 出个实例对象
描述new一个对象的过程
  • 创建一个新对象
  • this指向这个新对象
  • 执行代码,即对this赋值
  • 返回this (return this)
function Foo(name,age){
	this.name = name;
	this.age = age;
	this.class = 'class-1'
	// return this  //默认有这一行 解开注释 和 不解开注释都没所谓
}
var f = new Foo('zhangsan', 20) // new这个函数执行的时候,this先变成一个空对象,然后return this,最后赋值给变量 f 
// var f1 = new Foo('lisi', 21) //创建多个对象
zepto(或其他框架)源码中如何使用原型链
  • 阅读源码是高效提高技能的方式,推荐zepto
  • 但不能埋头苦钻,有技巧在其中,搜“zepto设计和源码分析”
  • 慕课网搜索“zepto设计和源码分析”
  • 阅读体会和收益
    封装一个DOM查询的例子
function El(id){
	this.el = document.getElementById(id)
}
El.prototype.html = function(val){
	var el = this.el
	if(val){
		el.innerHTML = val;
		return this//可以不用返回,返回是为了链式调用
	}else{
		el.innerHtml = null
	}
}
El.prototype.on = function (type, cb){
	var el = this.el;
	el.addEventListener(type,cb);
	return this;
}
var div = new El('id');
div.html('<p>123</p>').on('click',function(){alert('click success')})
//div.on('click',function(){alert('clicked success')})
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值