深入理解javascript中函数的prototype属性(原型) | 您所在的位置:网站首页 › js构造函数是什么意思 › 深入理解javascript中函数的prototype属性(原型) |
函数的prototype属性
一、 只要我们创建一个函数,该函数就会自动获得一个prototype属性,这个属性指向函数的原型对象。 二、 函数的prototype属性是一个对象 typeof fn.prototype //"object"prototype属性是一个对象,那么我们除了以普通对象的形式访问对应的属性和方法以外,还可以用什么方式访问呢?答案就是当 函数作为‘构造函数’,我们是用‘new关键字创建实例’来访问prototype属性中对应的属性和方法 function Fn(){ this.name = "CJF" } Fn.prototype.name="CJF1"; Fn.prototype.getName = function(){ return this.name; } var f = new Fn(); f.name;//输出 'CJF' f.getName(); //输出 'CJF' Fn.prototype.getName();//输出 'CJF1'可以看到当函数作为构造函数创建实例的时候,该实例就可以调用原型对象上的方法,此时的this是指向f(对this不理解可以参考我的另一篇博客 js中this指向问题 ) ;实例f访问name属性,因为其自身有name属性,可以访问到,所以输出 ‘CJF’,自身没有name属性,那么脚本引擎就会去查询用于创建当前对象的构造函数的原型(相当于我们访问f.constructor.prototype),找到构造函数原型对象有name属性就会返回‘CJF1’。(f和其原型对象都有name属性,对象自身属性的优先级高于原型对象) function Fn(){} Fn.prototype.name="CJF1"; Fn.prototype.getName = function(){ return this.name; } var f = new Fn(); f.name;//输出 'CJF1' f.getName(); //输出 'CJF1' Fn.prototype.getName();//输出 'CJF1'三、prototype原型对象的 “实时性” 由于javascript中,所有对象都是通过传引用的方式来传递,我们每次新创建函数实例中都没有一份属于自己的原型副本,也就是说原型对象是所有实例共享的,我们修改函数的原型对象,那么有该函数创建的所有实例对象的prototype都会跟着变化。 function Fn(){} Fn.prototype.name="CJF1"; Fn.prototype.getName = function(){ return this.name; } var f = new Fn(); f.name;//输出 'CJF1' f.getName(); //输出 'CJF1' f.getAge();//此时没有实例f并没有getAge方法 浏览器会报错 Uncaught TypeError: f.getAge is not a function //加上后面的就可以正常访问了 Fn.prototype.getAge = function(){ return 20; } f.getAge();//20四、原型链 刚才我们有了解到,当对象自身属性和原型属性相同时,自身属性优先级高于原型属性,但是当对象自身没有我们要访问的属性或者方法时,就会沿着创建当前对象的构造函数的原型(原型链)查找要访问的属性,一旦查找到就返回对应属性,没查找到对应属性返回undefined,但是没查找到要访问的方法会报错(因为没有该方法却还要执行该方法所以报错)。 function Fn(){} Fn.prototype.name="CJF1"; Fn.prototype.getName = function(){ return this.name; } var f = new Fn(); f.constructor.prototype == Fn.prototype //true
如果有写的不对的,或者理解不到位地方,欢迎各位指正。 |
CopyRight 2018-2019 实验室设备网 版权所有 |