先上概念
每创建一个函数,内部都会带有一个指向具有共享属性和方法的 prototype 属性,这个属性是一个对象,称为原型。 JS中每个对象都有一个内置属性 proto ,用于指向创建该对象构造函数的原型对象,对象要读取属性的值时,先在自身的属性列表中查找,找不到则通过 proto ,到引用的原型属性列表中查找,一级一级往上,形成一个引用链,称为原型链****
原型链
什么是原型
function User(firstName, lastName){
this.firstName = firstName;
this.lastName = lastName;
this.fullName = firstName + ' ' + lastName;
}
User.prototype.sayHi = function(){
console.log('你好,我是' + this.fullName);
}
User.prototype.sayHiEN = function(){
console.log('hello, my name is ' + this.fullName);
}
var u1 = new User('邓', '旭明');
u1.sayHi(); // 你好,我是邓旭明
var u2 = new User('莫', '妮卡');
u2.sayHiEN(); // hello, my name is 莫妮卡
上面这段代码发生了什么?prototype是什么东西?new User又是什么东西?为什么u1 u2可以调用sayHi和sayHiEN方法?
一图胜千言
从上图中可以看出:
- 每个函数都有一个原型对象
- 原型对象上的成员被所有实例共享
什么是原型链
所有的对象都是通过new 函数的方式创建的
var u1 = new User('邓', '旭明'); // 对象 u1 通过 new User 创建
var u2 = { // 对象 u2 通过 new Object 创建
firstName: '莫',
lastName: '妮卡'
}
// 等效于
var u2 = new Object();
u2.firstName = '莫';
u2.lastName = '妮卡';
上面的代码形成的原型图如下
原型对象本身也是一个对象,默认情况下,是通过new Object创建的,因此,上面的两幅原型图是可以发生关联的
Object.prototype.__proto__比较特殊,它固定指向null
可以看出,u1的隐式原型形成了一个链条,称之为原型链
当读取对象成员时,会先看对象自身是否有该成员,如果没有,就依次在其原型链上查找
完整的链条
instanceof
a instanceof b,b必须是一个函数,检查a的原型链上是否存在b的原型
this指向
函数中的this只能在函数调用时才能确定!只能,只能,只能,重要的事说三遍
注意点:
- 使用bind时,得到的新函数无法通过其他方式再次修改this,但
new则例外。 - 如果函数是非严格模式,使用
call apply bind时,传入null或undefined,相当于传入全局对象
小知识
我们在代码中使用的this,其实就是执行上下文中的this
由于执行上下文只能在函数调用时创建,所以,this只能在函数调用时确定
箭头函数
箭头函数是ES6提供的一种简洁的函数定义语法,所有可以使用函数表达式的地方都可以使用箭头函数。
var sum = function(a, b){
return a + b;
}
// 箭头函数格式
var sum = (a, b) => {
return a + b;
}
箭头函数有着一个重要的特征:箭头函数中没有this和arguments,是真的没有!
所以,箭头函数中使用的this,是作用域链上的this
\