js原型和原型链
- 一、构造函数和原型对象中的this
- 二、原型对象的constructor属性
- 三、原型链
- 四、关系图
- 五、普通函数和函数对象
参考文章链接: link
一、构造函数和原型对象中的this
指向实例对象
// 定义构造函数function Star(name,age){this.name = name;this.age = age;console.log(this,'我是构造函数的this')}// 公共的属性或方法Star.prototype.sing=function(){console.log('我是会唱歌的明星')console.log(this,'我是原型对象中的this')}// 创建实例对象const obj=new Star('周深',18)obj.sing()
二、原型对象的constructor属性
默认原型对象的的constructor属性是指向构造函数(找自己的爸爸)的,但是当原型对象需要定义多个公共的方法时,原型对象会重新以赋值的方式进行定义,此时的constructor属性需要自己手动添加
// 定义构造函数function Star(name,age){this.name = name;this.age = age;}// 公共的属性或方法// 定义多个方法Star.prototype={constructor: Star,sing:function(){console.log('我会唱歌')},dance:function(){console.log('我还会跳舞')}}// 创建实例对象const obj=new Star('单依纯',18)console.log(Star.prototype.constructor)
三、原型链
// 定义构造函数function Star(name,age){this.name = name;this.age = age;}// 公共的属性或方法// 定义多个方法Star.prototype={constructor: Star,sing:function(){console.log('我会唱歌')},dance:function(){console.log('我还会跳舞')}}// 通过构造函数创建实例对象const obj=new Star('单依纯',18)// 原型对象和实例对象找爸爸 构造函数console.log(Star.prototype.constructor===obj.constructor)// 构造函数找自己的大儿子 原型对象console.log(Star.prototype)// 实例对象找原型对象 二儿子去找大儿子玩console.log(obj.__proto__)// 判断是不是都在找大儿子console.log(Star.prototype===obj.__proto__)// 原型链 大儿子去找妈妈console.log(Star.prototype.__proto__)// 判断一下是不是顶点object.prototypeconsole.log(Star.prototype.__proto__===Object.prototype)
四、关系图
五、普通函数和函数对象
所有Function的实例都是函数对象,其他的都是普通对象,Function实例的实例就是普通对象
所以回过头来我们会发现实例对象只是一个普通对象,obj是没有prototype属性的,而构造函数是一个函数对象,只有函数对象才有prototype这个原型属性
而prototype可以帮助我们定义或者重写一些新的公共方法
Object, Function, Array, String, Number, Boolean, Date 等都是 JS 内置的函数对象。