js能力提高(一)原型规则

最新推荐文章于 2025-06-25 01:06:26 发布

原创最新推荐文章于 2025-06-25 01:06:26 发布 · 222 阅读

0 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

16 篇文章

订阅专栏

本文深入探讨了JavaScript中的构造函数、原型规则、原型链及其实现方式，通过实例讲解了如何利用构造函数创建对象，原型继承的实现，以及如何遍历对象属性。同时，文章还介绍了如何准确判断变量类型，提供了instanceof和Array.isArray()的对比。

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

基础扎实才能走的更远，所以笔者现在打算回头重新梳理一下js的知识。里面的知识是跟着某课老师系统学习的，这里只做总结，方便日后查看。

1.构造函数

function Foo(name, age) {
  this.name = name;
  this.age = age;
  // return this;   //默认有这行
}
var f = new Foo ('xiaoming',18);

2.构造函数扩展

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

这里可能会涉及到的问题是 var a={},a的构造函数是谁。。。。

3.原型规则

所有的引用类型（数组，对象，函数）,都具有对象特性，即可自由扩展（null除外）

所有的引用类型（数组，对象，函数），都有一个__proto__（隐示原型）属性，属性值是一个普通的对象

所有的函数（注意不是引用类型），都有一个prototype（显示原型）属性，属性值也是一个普通的对象

所有的引用类型（数组，对象，函数），__proto__（隐示原型）属性值都指向的是构造函数的prototype属性值

当试图得到一个对象的属性值，如果这个对象本身没有这个属性，它会去它的__proto__（隐示原型）中去查找，即去构造函数的__proto__（隐示原型）中去查找。

var obj = {}; obj.a = 100;
var arr = []; arr.a = 100;
function fn () {}; fn.a = 100;

console.log(obj.__proto__);
console.log(arr.__proto__);
console.log(fn.__proto__)

console.log(fn.prototype)

console.log(obj.__proto__ === Object.prototype)


----------------------------------

// 构造函数
function Foo(name) {
  this.name = name;
  // return this;   //默认有这行
}
Foo.prototype.getName = function () {
  alert(this.name)
}
// 创建实例
var f = new Foo('xiaohong');
f.printName = function () {
  console.log(this.name)
}
f.getName()


接下来再补充一点，如果我要遍历f方法中的属性会发现它会把原型上的属性都会打印出来，我们希望的是它只打印其自身本来的属性，该如何实现呢
for (item in f) {

  if(f.hasOwnProperty(item)){
    console.log(item)
  }
}

4.原型链

funtion Foo (){

}
Foo.prototype.getName = function () {}

var f = new Foo();

sub.toString() // 要去f.__proto__.__proto__中查找

5.instanceof

用于判断 引用类型 属于哪个 构造函数 的方法

习题：

1.如何准确判断一个变量是数组类型

var arr = []
arr instanceof Array // true   instanceof查找不太准确，它会判断原型上的

--------------------
例如
var obj = {}
obj.__proto__ = [].__proto__
obj instanceof Array    // true
Array.isArray(obj)    // false

--------------------

Array.isArray(arr) // true

2.写一个原型继承的例子

function SupperClass () {
  this.suppervalue = true;
}
SupperClass.prototype.getSupperValue = function () {
  return this.suppervalue;
};
function SubClass () {
  this.subvalue = false;
}
SubClass.prototype = new SupperClass();
var f = new SubClass()
console.log(f.getSupperValue())

3.描述new一个对象的过程

创建一个新对象
this指向这个对象
执行代码，即对this赋值
返回this

------------------------

function Foo(name, age) {
  this.name = name;
  this.age = age;
  // return this;   //默认有这行
}
var f = new Foo ('xiaoming',18);