原型知多少

发表于 | 分类于

对象:对象是属性的集合，对象是函数创建的，函数又是一种对象

  • obj={name:'huangbin'}<==>var obj = new Object(),obj.name='huangbin'
  • function f1(x,y){return x+y}<==>var f1 = new Function('x','y','return x+y')
  • 始终记住对象的proto指向创建它的函数的prototype
  1. 除了undefind,Number,String,Boolean是简单的值类型，其他的null,Object,Function都是对象
  2. 函数有prototype属性，它是对象，是函数属性和方法的集合
  3. 每个对象都有一个proto属性(隐式原型),它指向创建这个对象的函数的原型
  4. 函数也是一种对象:Object()函数是new Function()创建的,所以他的proto也指向Fuction.prototype

  1. 构造函数模式

    • 构造函数:
      1. 不创建对象
      2. 直接将属性方法赋给this对象
      3. 没有return语句
    • 构造函数每定义一个函数就实例化了一个对象，会导致不同作用域链和标识符解析
      1
      2
      3
      4
      5
      6
      7
      function Person(name,age){
      	this.name = name;
      	this.age = age,
      	this.sayName = function(){
      		console.log(this.name)
      	}
      }

  2. 原型模式

    • 可以让所有实例化的对象共享属性、方法

      Person(){}
      1
      2
      3
      4
      5
      6
      7
      8
      Person.prototype.name="huangbin";
      Person.prototype.sayname = function() {
      	alert(this.name);
      }
      var person1 = new Person();
      person1.sayname();//huangbin
      var person2 = new Person();
      alert(person1.sayname==person2.sayname)//true

  3. [[Prototype]]指针指向构造函数的原型对象,在Firefox、Safari、Chrome中有proto属性可以访问它

  4. Person.prototype.constructor指向Person

  5. Person.prototype.isPrototypeOf(person1)是判断某个构造函数的原型对象是不是实例对象指向的

  6. Object.getPrototypeOf():是返回实例对象的指向构造函数原型的指针([[Prototype]])

  7. Person.hasOwnProperty(“name”)是判断属性是否来自实例

  8. 要获取对象中可枚举的属性,可使用Object.keys(obj)方法

  9. 想要获得所有实例的属性，无论是否可枚举，Object.getOwnPropertyNames(obj)

  10. 当使用for-in获取对象枚举属性时要用hasOwnProperty来判断:判断属性是否存在当前对象中,而不是原型对象中,当在类或者构造函数中没把属性指定到this上,那么该属性就会自动挂载到原型对象上
  11. ES6中的class写法会导致属性不可枚举Object.keys
  12. obj instanceof Function: obj是否在构造函数的原型链上

  13. 关于函数中的this

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var obj1={
    	num:4,
    	fn:function(){
    		var f=() => {    
    			console.log(this); //object,f()定义在obj1对象中，this就指向obj1,这就是箭头函数this指向的关键
    			setTimeout(function() {
    				console.log(this);//window，非箭头函数的情况下还是要看宿主对象是谁，如果没有被对象调用，函数体中的this就绑定的window上
    			});
    		}
    		f();
    	}
    }
    obj1.fn();

  14. 关于变量提升

    • 变量在生成执行上下文时，会帮其声明并赋值undefind
    • 函数则会将整个函数存入内存空间
谢谢你请我喝咖啡