Javascript基础知识点整理三：原型和原型链

IFE 2019年03月21日分类：前端知识体系标签： javascript 浏览量： 1698

1. new一个对象的过程

创建一个以构造函数为原型的新对象（空对象）
this指向这个新对象，并将构造函数的 prototype 赋值给对象的__proto__ 属性
执行代码(即对this赋值)
将对象作为函数的 this 传进去。如果有 return 出来东西是对象的话就直接返回 return 的内容，没有的话就返回创建的这个对象

function NewFunc(func){
  var ret = {};
  if (func.prototype !== null) {
    ret.__proto__ = func.prototype;
  }
  var ret1 = func.apply(ret, Array.prototype.slice.call(arguments, 1));
  if ((typeof ret1 === "object" || typeof ret1 === "function") && ret1 !== null) {
    return ret1;
  }
  return ret;
}

2. 构造函数

var a={} 其实是var a=new Object()的语法糖
var a =[] 其实是var a=new Array()的语法糖
function Foo(){...}其实是var Foo= new Function(...)
可以使用instanceof判断一个函数是否是一个变量的构造函数: arr1 instanceof Array

instanceof应用：

//能遍历对象和数组的forEach函数
function forEach (obj, fn) {
  var key;
  if (!(a instanceof Object)){
    console.log('不是对象')
    return
  }
  if (obj instanceof Array) {
    // 准确判断是不是数组
    obj.forEach(function (item, index) {
      fn(index, item)
    })
  } else {
    // 不是数组就是对象
    for (key in obj) {
      fn(key, obj[key])
    }
  }
}
var arr = [1, 2, 3];
//这里的参数顺序换了，为了和对象的遍历格式一致
forEach(arr, function (index, item) {
  console.log(index, item);
})
var obj = { x: 100, y: 200 }
forEach(obj, function (key, value) {
  console.log(key, value);
})

3. 原型和原型链

原型规则：

所有的引用类型（数组、对象、函数）都具有对象特性，即可自由扩展属性（除了"null"以外）
所有的引用类型（数组、对象、函数),都有一个__proto__(隐式原型)属性，属性值是一个普通的对象
所有的函数，都有一个prototype(显式原型)属性，属性值也是一个普通的对象，这个对象有个constor属性，指向这个函数本身
所有的引用类型（数组、对象、函数),__proto__属性值指向它的构造函数的"prototype"属性值

原型链：

当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么就会去它的__proto__(即它的构造函数的prototype)中寻找

实例：

//e.g 封装DOM查询
function Elem(id) {
  this.elem = document.getElementById(id);
}
Elem.prototype.html =function (val) {
  var elem =this.elem;
  if (val) {
    elem.innerHTML =val;
    return this; //链式操作 
  } else {
    return elem.innerHTML;
  }
}
Elem.prototype.on =function (type,fn) {
  var elem =this.elem;
  elem.addEventListener(type,fn);
  return this;
}
var div1 = new Elem('div1');
//console.log(div1.html());
div1.html('<p>I am a programmer</p>')
div1.on('click',function () {
  alert('clicked');
})

Javascript基础知识点整理三：原型和原型链

1. new一个对象的过程

2. 构造函数

3. 原型和原型链

评论总数： 0

登陆后才可以评论

博客目录:

最新博客：

推荐博客:

分类:

标签云：

归档