草庐IT

记录--JS原型链

林恒 2023-03-28 原文

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

引子

对于初学者学习原型链，还是有很大的困难。一方面是函数与对象分不太清楚；另一方面，不懂原型链的继承等。本人曾今也深受困惑，并且把疑惑的地方都记录下来，为大家做出解释。明明CSDN搜索关于原型链的文章一大堆，为啥我还要写？个人觉得，写下这篇原型链文章，不仅表达我对原型链理解的程度，也算是总结自己了自己的学习心得；更多的，此篇文章，或多或少会为大家理解原型链，又多出了一些新的感悟。同时，在讲解原型链之前，要补充关于函数和对象的一些知识，加强大家的理解。总体围绕原型链展开，其它内容为辅。希望大家能够静下心来，认真阅读，最终能够有所收获！

对象与函数的区别

  • 对象包含函数，函数是特别的对象，也就是说对象的范围更大，而函数的范围更加小。举个简单例子，985,211等知名大学是一定是本科，而本科不一定是985,211，本科可能是普通一本，甚至是普通二本，三本等。
  • 对象特别拥有*** --proto–（因为使用Markdown语法写文章，下划线的_会转译成别的作用，所以用-代替，接下里的文章内容都将如此) *** 和 constructor 两个属性，而函数特别拥有 prototape 这个属性。这个属性因为函数属于特殊的对象，因此函数也可以有 –proto– 和 constructor 两个属性。也就是说，对象有的，我都有，对象没有的，我还有。换句话说，你的就是我的，我的还是我的。
  • Object函数和Function函数是已经内置好了的,除此之外，还有Array，Date等等。Object这个函数，也是由 Function 构造的。并且，所有函数都是 Function的实例。换句话说，我们声明的普通函数 *function name（）{} *， 更加像是由new Function实例生成的，如
var ff = new Function("a", "b", "console.log(a,b); return a+b;");
就相当于function ff(a,b){
console.log(a+b);
 return a+b;
}
值得注意的是，Function最后一个""中，是函数的主体，在它之前的都是参数。
并且，由Function实例生成的，都是函数。这是与其它普通函数实例出来的
最大不同，普通函数new生成的，是一个对象，而不是函数。

通过 函数名.–proto– 可以得到 Function.prototape。通过 函数名.constructor这个属性，可以得到它的构造函数是Function。比较巧的是，Function的constructor就是它自身，Function的–proto–也是它的 Function.prototape。但是规定，一切函数的prototape的–proto– 指向 Object.prototape，即函数名.prototape.–proto–等于Object.prototape

对象的创建

  1. 通过new ＋构造函数，比如var obj=new Object（）
  2. 通过字面量的形式，比如var obj={}，这个是JOSN对象的简写。JOSN是由Object构造的，也就是说 JOSN不是函数，也就不拥有prototape这个属性，JOSN.–proto–为Object.prototape，而不是Function.prototape。JOSN.constructor为Object。Math对象和JOSN一样，也是由Object实例的。那么，Math.constructor也为Object，Math.–proto–也为Object.prototape值得注意的是，JOSN和Math已经是实例对象了，不可以再new一个实例对象。也就是不能new JOSN（）和new Math（）等 ，这些都是错误的操作，这是很多新学者会出错的地方。

函数的创建

  1. 通过函数声明式，如function name(){}
  2. 通过函数表达式，如let name=function(){}
  3. 通过Function实例，如let name=new Function().凡事由Function实例的，都是函数

函数的静态属性和方法，以及函数的实例属性和方法

  • 静态属性和方法
    通过函数名.属性或者方法就是静态属性或者方法。
    上代码

function Son(){} ;
Son.age=18;
Son.sex="男";
Son.play=function(){
console.log("我会玩游戏");
 }
  Son.sing=function(){
console.log("我会唱歌");
 }
 要想得到age，sex属性以及play(),sing()方法，只能通过函数名.属性或者方法使用
 如 
 console.log(Son.age,Son.sex)//18,男
 Son.play()//我会玩游戏
 Son.sing()//我会唱歌
 不能通过new一个对象得到
 比如
 var son= new Son（）；
 console.log(Son.age,Son.sex)//undefined,undefined
 son.sing()//son.sing is not a function
  • 实例属性和方法
  • 通过在函数内部，用this.属性或者this.方法的就是实例属性或方法
  • 上代码
function Son(name,age,phone){
this.name1=name;
this.age=age;
this.phone=phone;
this.dance=function(){
console.log("我会跳舞")
}
 this.getAge=function(){
return this.age;
}
}
   要想得到age，sex，phone属性以及dance(),getAge()方法，只能new一个实例对象，
然后通过实例对象.属性或者方法使用
   如
   var son1=new Children("小强","18","苹果");
   console.log(son1.name1);//小强
   console.log(son1.age);//18
   console.log(son1.phone);//苹果
   console.log(son1.getAge);//18
   son1.dance();//我会跳舞
   不能通过函数名.属性或者方法使用
   如
   console.log(Children.name1);//undefined
   Children.dance();//Uncaught TypeError: Parent.say is not a function

–proto–属性的例子

–proto–属性，指向构造它的函数的prototape属性。比如

function Son() {
    
    }
    var son=new Son();
   console.log( son.__proto__==Son.prototape)//true
   console.log( Son.__proto__==Function.prototape)//true
   var obj=new Object()或者 var obj=new Object({})或者var obj={}
   console.log( obj.__proto__==Object.prototape)//true
   console.log(Object.__proto__==Function.prototape)//true
   console.log(Array.__proto__==Function.prototape)//true
   console.log(JOSN.__proto__==Object.prototape)//true
   console.log(Math.__proto__==Object.prototape)//true
   console.log(JOSN.__proto__==Function.prototape)//false
   console.log(Math.__proto__==Function.prototape)//false
   console.log(Function.__proto__==Function.prototape)//true 特殊
   上述表明，函数的__proto__属性指向的，都是Function.prototape，而实例对象指向的
   是构造函数的prototape属性。

constructor属性的例子

constructor属性，指向构造它的函数

function Son() {
    
    }
    var son=new Son();
    console.log(son.constructor==Son)//true
    console.log(Son.constructor==Function)//true
    console.log(Object.constructor==Function)//true
     console.log(Date.constructor==Function)//true
    console.log(Math.constructor==Object)//true
    console.log(JOSN.constructor==Object)//true
    console.log(Function.constructor==Function)//true
    上述表明，函数的constructor属性指向的，都是Function，而实例对象指向它的构造函数

prototape属性的例子

prototape属性 函数特别拥有，对象没有这个属性

var obj={}
    console.log(obj.prototape)//undefined
    function Son() {
    
    }
    var son=new Son();
    console.log(obj.prototape)//undefined
    console.log(son.prototape)//undefined
    console.log(Date.prototape)//undefined
    console.log(JOSN.prototape)//undefined
    console.log(Object.prototape) //{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ,...}
    console.log(Son.prototape) //{constructor: ƒ}
    console.log(Function.prototape) //ƒ () { [native code] }
    由此可见，对象没有这个属性，并且，prototape的值为对象
    我们可以通过prototape.constructor，可以知道这个原型对象的构造函数是谁
    console.log(Object.prototape.constructor)//ƒ Object() { [native code] } 
    console.log(Son.prototape.constructor)//ƒ Son() {  }
    console.log(Son.prototape.constructor)//ƒ Function() { [native code] }
    我们可以向prototape中添加方法或者属性，但一般添加方法，代表这个链上的公共方法，个人认为，
    这个方法如果很多对象都用到了，不妨放在Object.prototape中。
    Object.prototape.sing=function(){
    console.log("我会唱歌");
    }
    Object.prototape.sing（）//我会唱歌
    首先new 一个实例对象
    var son=new Son();
    然后通过实例对象.方法名就可以使用
    son.sing();//我会唱歌

原型链

  • 没有改变prototape的原型链

    • 如图

  • 箭头指向它们的方向，上述关系（–proto–,constructor,prototape）都在例子中讲解了，就不再赘述，这里关注的是原型链。(备注：本图的JOSN和Math对象不好画在图的左边，因此又画了一个Object.prototape原型对象在右边。)我们看Son的实例对象，为了方便，我写一个var son=new Son（）。通过son.–proto–，可以得到Son.prorotape。如果继续通过链式，即son.–proto–.–proto–可以得到Object.prototape。我们已经知道了，son.–proto–就是为Son.prorotape，那么我们通过Son.prorotape.–proto–也可以得到Object.prototape。也就是说，–proto–能够让我们顺藤摸瓜，一直向上查找，这就是原型链（图中已经用红色大边框包裹起来了）。当我们son.–proto–.–proto–.–proto–（相当于Object.prototape–proto–，也相当于Son.prorotape.–proto–.–proto–）时，得到null，这说明，原型链是有终点的。

  • 为什么要原型链？

    当我们需要一些方法时，别的函数已经有了这些方法，那么我们不需要自己再次造轮子，可以通过原型链，查找各个父级的prototape属性的值，得到想要的方法。比如：我们想要让Object的实例对象可以使用sing（）方法，同时也想让Son的实例对象使用一个sing（）方法，那么我们就可以通过在Object的原型对象上，写上这个sing（）共有方法，不需要让Son的原型对象上，再写下这个sing（）方法。

Object.prototape.sing=function(){
console.log("我会唱歌");
}
首先new 一个实例对象
var son=new Son();
然后通过实例对象.方法名就可以使用
son.sing();//我会唱歌
  • 所以，通过原型链，可以让我们少些一些相同的代码。我们只需要把相同的方法放在父级上，就不必自己重写一个；除此之外，如果我们这个实例对象的构造函数如果没有这个方法，那么这个实例对象会依次向原型链查找，直到查找到Object.prototape为止，如果还没有找到，那就终止，并且报错。如果这个构造函数有这个方法，那么按照构造函数的来，而不是父级的prototape里面的方法。这说明，存在一定的优先级，我们需要注意。
  • 改变了prototape的值原型链

    • 如图

我们已经知道了prototape的值是一个对象，那么我让prototape的值等于一个实例对象，会怎么样？
如上图所示，即Son.prototape=new Parent()。我们试着打印一下Son.prototape的值，console.log(Son.prototape)//Parent {},显示是parent的实例对象，再试着打印console.log(Son.prototape.constructor)//function Parent(){},发现竟然是Parent，你会心想，这就不合理了。我应该指向Son才对啊。这里我做出解释，因为我们是将Son.prototape重新赋值了，将原本的对象覆盖了，即地址发生了变化。现在的地址和之前的地址不是同一个地址（对象的重新赋值，会改变地址），那么大家是不是瞬间清楚了。同时，这也说明了，Son.prototape.constructor继承Parent.prototape.constructor，我相信这下子大家都清楚了，说明constructor也可以继承。为了解决这种问题，我们必须让Son.prototape.constructor重新指向Son，所以Son.prototape.constructor=Son，这样子，console.log(Son.prototape.constructor)//function Son(){}就解决问题了。之后通过–proto–与没有改变prototape的原型链是一样的，只不过Son.prototape.–proto–为Parent.prototape。那么，我们new 一个Son的实例对象，有
var son=new Son();
console.log(son.--proto--)//Son.prototape
console.log(son.--proto--.--proto--)//Parent.prototape
console.log(son.--proto--.--proto--.--proto--)//Object.prototape
console.log(son.--proto--.--proto--.--proto--.--proto--)//null
console.log(Son.prototape.--proto--)//Parent.prototape
console.log(Son.prototape.--proto--.--proto--)//Object.prototape
console.log(Son.prototape.--proto--.--proto--.--proto--)//null
console.log(Patent.prototape.--proto--)//Object.prototape
console.log(Patent.prototape.--proto--.--proto--)//null
console.log(Object.prototape.--proto--)//null
并不是说，只有一个函数的prototape的值可以更改，我们还可以更改很多函数的prototape值。比如Parent的prototape的值，让Parent.prototape=new Grandparent又加了一个父级，多出来一条链。有兴趣的，可以去试试。

本文转载于:

https://juejin.cn/post/7101887288652595230

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

 

JS记录prototapeconsoleprotoJavaScript

有关记录--JS原型链的更多相关文章

  1. ruby - Sinatra:运行 rspec 测试时记录噪音 - 2

    Sinatra新手；我正在运行一些rspec测试，但在日志中收到了一堆不需要的噪音。如何消除日志中过多的噪音？我仔细检查了环境是否设置为:test，这意味着记录器级别应设置为WARN而不是DEBUG。spec_helper:require"./app"require"sinatra"require"rspec"require"rack/test"require"database_cleaner"require"factory_girl"set:environment,:testFactoryGirl.definition_file_paths=%w{./factories./test/

  2. ruby-on-rails - Rails 5 Active Record 记录无效错误 - 2

    我有两个Rails模型，即Invoice和Invoice_details。一个Invoice_details属于Invoice，一个Invoice有多个Invoice_details。我无法使用accepts_nested_attributes_forinInvoice通过Invoice模型保存Invoice_details。我收到以下错误:(0.2ms)BEGIN(0.2ms)ROLLBACKCompleted422UnprocessableEntityin25ms(ActiveRecord:4.0ms)ActiveRecord::RecordInvalid(Validationfa

  3. ruby-on-rails - 事件记录 : Select max of limit - 2

    我正在尝试将以下SQL查询转换为ActiveRecord，它正在融化我的大脑。deletefromtablewhereid有什么想法吗？我想做的是限制表中的行数。所以，我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看，您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).

  4. Ruby 守护进程导致 ActiveRecord 记录器 IOError - 2

    我目前正在用Ruby编写一个项目，它使用ActiveRecordgem进行数据库交互，我正在尝试使用ActiveRecord::Base.logger记录所有数据库事件具有以下代码的属性ActiveRecord::Base.logger=Logger.new(File.open('logs/database.log','a'))这适用于迁移等(出于某种原因似乎需要启用日志记录，因为它在禁用时会出现NilClass错误)但是当我尝试运行包含调用ActiveRecord对象的线程守护程序的项目时脚本失败并出现以下错误/System/Library/Frameworks/Ruby.frame

  5. ruby-on-rails - 在 Rails 中更高效地查找或创建多条记录 - 2

    我有一个应用需要发送用户事件邀请。当用户邀请friend(用户)参加事件时，如果尚不存在将用户连接到该事件的新记录，则会创建该记录。我的模型由用户、事件和events_user组成。classEventdefinvite(user_id,*args)user_id.eachdo|u|e=EventsUser.find_or_create_by_event_id_and_user_id(self.id,u)e.save!endendend用法Event.first.invite([1,2,3])我不认为以上是完成我的任务的最有效方法。我设想了一种方法，例如Model.find_or_cr

  6. ruby - 在模块/类之间共享全局记录器 - 2

    在许多ruby​​类之间共享记录器实例的最佳(正确)方法是什么？现在我只是将记录器创建为全局$logger=Logger.new变量，但我觉得有更好的方法可以在不使用全局变量的情况下执行此操作。如果我有以下内容:moduleFooclassAclassBclassC...classZend在所有类之间共享记录器实例的最佳方式是什么？我是以某种方式在Foo模块中声明/创建记录器还是只是使用全局$logger没问题？ 最佳答案 在模块中添加常量:moduleFooLogger=Logger.newclassAclassBclassC..

  7. ruby - Sinatra 中的全局救援和日志记录异常 - 2

    如何在出现异常时指定全局救援，如果您将Sinatra用于API或应用程序，您将如何处理日志记录？ 最佳答案 404可以在not_found方法的帮助下处理，例如:not_founddo'Sitedoesnotexist.'end500s可以通过调用带有block的错误方法来处理，例如:errordo"Applicationerror.Plstrylater."end错误的详细信息可以通过request.env中的sinatra.error访问，如下所示:errordo'Anerroroccured:'+request.env['si

  8. ruby-on-rails - 在不重新查询数据库的情况下重新排序 Rails 中的事件记录？ - 2

    例如，假设我有一个名为Products的模型，并且在ProductsController中，我有以下代码用于product_listView以显示已排序的产品。@products=Product.order(params[:order_by])让我们想象一下，在product_listView中，用户可以使用下拉菜单按价格、评级、重量等进行排序。数据库中的产品不会经常更改。我很难理解的是，每次用户选择新的order_by过滤器时，rails是否必须查询，或者rails是否能够以某种方式缓存事件记录以在服务器端重新排序？有没有一种方法可以编写它，以便在用户排序时rails不会重新查询结果

  9. ruby-on-rails - ActiveRecord 如何将现有记录添加到 has_many :through relationship in rails? 中的关联 - 2

    在我的Rails项目中，我有三个模型:classRecipe:recipe_categorizationsaccepts_nested_attributes_for:recipe_categories,allow_destroy::trueendclassCategory:recipe_categorizationsendclassRecipeCategorization通过这个简单的has_many:through设置，我怎样才能像这样获取给定的食谱:@recipe=Recipe.first并根据现有类别向此食谱添加类别，并在相应类别上对其进行更新。所以:@category=#Exi

  10. ruby-on-rails - 使用 Rails 事件记录获取二级模型 - 2

    我有一个帖子属于城市的关系，城市又属于一个州，例如:classPost现在我想找到所有帖子及其所属的城市和州。我编写了以下查询来获取带有城市的帖子，但不知道如何在同一查找器中获取带有城市的相应州:@post=Post.find:all,:include=>[:city]感谢任何帮助。谢谢。 最佳答案 Post.all(:include=>{:city=>:state}) 关于ruby-on-rails-使用Rails事件记录获取二级模型，我们在StackOverflow上找到一个类似的问

随机推荐