每个函数都有一个 prototype 属性,它默认指向一个 Object 空对象(即:原型对象)
* 函数的prototype属性:在定义函数时自动添加的,默认值是一个空object对象
* 对象的_ proto__属性:创建对象时自动添加的, 默认值为构造函数的prototype属性值
* 程序员能直接操作显式原型,但不能直接操作隐式原型(ES6之前)
- <script>
- // 每个函数都有一个 prototype 属性,它默认指向一个 Object 空对象(即:原型对象)
- function fun(){ }
- console.log(fun.prototype);
- // 向原型对象中添加属性或者方法 ===> 实例对象可以访问
- fun.prototype.test = function(){
- console.log('我是原型上添加的方法test(),实例可以调用');
- }
- console.log(fun.prototype);
- // 原型对象中有一个属性constructor,它指向函数对象
- console.log(fun.prototype.constructor===fun);
-
- // 创建一个实例,并调用上面给原型添加的方法 test
- var fun1 = new fun()
- fun1.test()
- </script>
1、 函数的显示原型指向默认是空 Object 实例对象(但 Object 不满足)
- function Fn() {
- this.test1 = function(){
- console.log('test1()');
- }
- }
- Fn.prototype.test2 = function(){
- console.log('test2()');
- }
- var fn = new Fn()
- console.log(Fn.prototype instanceof Object); // true
- console.log(Object.prototype instanceof Object); // false
2、 所有函数都是 Function 的实例(包括 Function 本身)
- console.log(Fn instanceof Function); // true
- console.log(Function.__proto__ ===Function.prototype);
3、Object 的原型对象是原型链的尽头
console.log(Object.prototype.__proto__); // null
4、属性一般放在对象,方法一般放在原型上,实例对象的隐式原型等于构造函数的显示原型(Person.prototype)
- <script>
- function Person(name,age){
- this.name = name
- this.age = age
- }
- Person.prototype.setName = function(name){
- this.name = name
- }
- var p1 = new Person('Tom','12')
- console.log(p1);
- p1.setName('Bob')
- console.log(p1);
- var p2 = new Person('rose','14')
- p2.setName('romatic')
- // 实例对象的隐式原型等于构造函数的显示原型(Person.prototype)
- console.log(p1.__proto__ === p2.__proto__); // true
- </script>
测试题:
- <script>
- function Fn(){}
- Fn.prototype.a = 1
- var fn1 = new Fn()
- Fn.prototype = {
- a:2,b:3
- }
- var fn2 = new Fn()
- console.log(fn1.a,fn1.b,fn2.a,fn2.b); // 1 undefined 2 3
- </script>
- <script>
- function F(){}
- Object.prototype.a = function(){
- console.log('a()');
- }
- Function.prototype.b = function(){
- console.log('b()');
- }
- var f = new F()
- f.a() // a()
- F.a() // a()
- F.b() // b()
- f.b() // f.b is not a function
- </script>