JS基础 -构造函数与原型、原型链 Part two

最新推荐文章于 2025-06-03 18:54:56 发布

weixin_34006965

最新推荐文章于 2025-06-03 18:54:56 发布

阅读量76

点赞数

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000014896874

本文介绍了JavaScript中构造函数的概念及使用方式，并详细解释了原型规则的五个特点，包括属性扩展、_proto_属性和prototype属性的作用等。此外，还提供了实例代码帮助理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.构造函数：

function Foo(name,age){// Foo构造函数名大写
    this.name =name;
    this.age = age;
    // return this;  //即使不写，构造函数也默认返回this，最好不写
}
var f = new Foo("lala",12);//创建实例
 （执行过程：（1）this 变成空对象
           （2）属性赋值
           （3）return this 赋值给 f
 ）

扩展：引用类型都有构造函数

var obj = {} //本质是  var obj = new Object() 的语法糖
var arr = [] //       var arr = new Array()
function Foo(){...} //var Foo = new Function(...)
（instanceof判断引用类型属于哪个构造函数，例： f instanceof Foo；判断逻辑：f的_proto_,一层一层向上找，能否对应到 Foo.prototype）

2.原型规则

以下所说的引用类型均指（对象、数组、函数，不包括null）
（1）所有引用类型，均可自由扩展属性（具有对象特性）
（2）所有引用类型，均有一个隐式原型属性（_proto_属性），属性值是一个普通对象
（3）只有所有函数，均有一个显示原型属性（prototype属性），属性值是一个普通对象
（4）所有引用类型，_proto_属性值 指向它的构造函数的 prototype属性值
   （obj._proto_ === Object.prototype）
 (5)当想要得到一个引用类型的某一属性时，如果其本身不具有该属性，则会去它的_proto_（即它的构造函数的 prototype）中寻找

知识补充：

 1.通过对象属性形式执行函数（例：obj.del()），this 指向对象本身
 2.for（item in obj）{ // for in在大多数浏览器屏蔽了来自原型的属性
     if(obj.hasOwnProperty(item)){} //建议加上判断
   }

3.原型链
图片描述

相关问题：

1.原型链继承的例子-封装DOM查询：
  function Elem(id){ //构造函数
      this.elem = document.getElementById(id)
  }
  
  Elem.prototype.html = funcion(val){
      var elem = this.elem;
      if(val){
          elem.innerHtml = val;
          // return this //最好不写 （链式操作）
      }else{
          rerurn elem.innerHtml 
      }  
  }
  
  Elem.prototype.on = funcion(type,fn){
      var elem = this.elem;
      elem.addEventListener(type,fn); //addEventListener可以多次绑定同一个事件并且不会覆盖上一个事件
  }
  
  var div = new Elem("XXX");
  div.html("<p>明天你好<p>").on("click",function(){ //链式调用
      alert("Hello World")
  })；
  
2.描述new对象的过程：
 （1）创建一个新对象；
 （2）this 指向这个新对象；
 （3）执行代码（this 赋值）；
 （4）返回 this；