前端笔记——JS基础（原型&&原型链）

n7then 发布于2019-08-22 18:02 / 2716人阅读

摘要：基础原型原型链构造函数默认有这一行张三李四构造函数扩展其实是的语法糖其实是的语法糖其实是使用判断一个函数是否是一个变量的构造函数原型规则和示例所有的引用类型数组对象函数，都具有对象属性即可自有扩展的属性，除外所有的引用类型数组对象函数，

JavaScript基础 —— 原型&&原型链 构造函数

  function Foo(name, age) {
    this.name = name;
    this.age = age;
    this.class = "class-1";
    //return this ; //默认有这一行
  }
  var f = new Foo("张三", 22);
  var f1 = new Foo("李四", 29);

构造函数 - 扩展

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

原型规则和示例

所有的引用类型(数组、对象、函数)，都具有对象属性(即可自有扩展的属性)，null除外

所有的引用类型(数组、对象、函数)，都有一个 __proto__ 属性(隐式原型)，属性值是一个普通的对象

  var obj = { };
  obj.x=100;
  console.log(obj.__proto__);
  // {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
  var arr = [];
  arr.x = 200;
  console.log(arr.__proto__);
  // [constructor: ƒ, concat: ƒ, find: ƒ, findIndex: ƒ, pop: ƒ, …]
  function fn() {};
  fn.x = 300;
  console.log(fn.__proto__);
  // ƒ () { [native code] }
  var d = null;
  console.log(d.__proto__);
  // Uncaught TypeError: Cannot read property "__proto__" of null

所有的函数，都有一个 prototype 属性(显式原型)，属性值也是一个普通对象

  console.log(fn.prototype);
  // {constructor: ƒ}

所有的引用类型(数组、对象、函数), __proto__ 属性值指向它的构造函数的 prototype 属性值

  console.log(obj.__proto__ === Object.prototype);
  // true

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

  // 构造函数
  function Foo(name, age) {
    this.name = name;
  }
  Foo.prototype.alertName = function() {
    console.log("alertName" + this.name);
  }
  // 创建示例
  var f = new Foo("张三");
  f.prientname = function() {
    console.log("prientname" + this.name);
  }
  // 测试
  f.prientname(); // prientname张三
  f.alertName(); // alertName张三

原型链

  // 构造函数
  function Foo(name, age) {
    this.name = name;
  }
  Foo.prototype.alertName = function() {
    console.log("alertName" + this.name);
  }
  // 创建示例
  var f = new Foo("张三");
  f.prientname = function() {
    console.log("prientname" + this.name);
  }
  // 测试
  f.prientname(); // prientname张三
  f.alertName(); // alertName张三

  f.toString(); // "[object Object]" 在f.__proto__.__proto__中查找，即Object的显式原型中寻找

instanceof

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

  // f的 __proto__ 一层一层网上找，找到对应的 Foo.prototype
  f instanceof Foo //true
  f instanceof Object //true

q:如何准确判断一个变量是数组类型

  var arr=[]
  // 可以正确判断的情况
  arr instanceof Array //true
  Object.prototype.toString.call(arr) // "[object Array]"
  Object.prototype.toString.apply(arr) // "[object Array]"
  Array.isArray(arr) // true
  // 不能判断的情况
  typeof arr // object 是无法判断是否是数组的
  // 不准确
  arr.constructor === Array //true 但是原型链可以被改写，这样判断不安全

  // 扩展 兼容老版本浏览器，isArray的写法
  if(!Array.isArray){
    Array.isArray = function(arg){
      return Object.property.toString.call(arg) === "[object Array]"
    }
  }

q:写一个原型链继承的例子

  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 main = new Elem("main")
  main.html("Hello World").on("click", function() {
    alert("Hello javascript")
  })

q:描述 new 一个对象的过程

创建一个对象

this 指向这个新对象

执行代码，即对 this 赋值

返回 this

  function Foo(name, age) {
    this.name = name;
    this.age = age;
    this.class = "class-1";
    //return this ; //默认有这一行
  }
  var f = new Foo("张三", 22);
  var f1 = new Foo("李四", 29);

GPU云服务器云服务器 js原型链的继承原型原型链原型链原型链继承

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95434.html

温故js系列（15）-原型&amp;原型链&amp;原型继承

摘要：给添加属性给的原型对象添加属性原型链在中，每个对象都有一个属性，其保存着的地址就构成了对象的原型链。实例变量实例函数原型链继承有了原型链，就可以借助原型链实现继承。是中唯一一个处理属性但是不查找原型链的函数。前端学习：教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总欢迎提issues斧正：原型&原型链&原型继承 JavaScript-原...

Ethan815 2019-08-22 10:37 评论0 收藏0
《你不知道的javascript》笔记_对象&amp;原型

摘要：上一篇你不知道的笔记写在前面这是年第一篇博客，回顾去年年初列的学习清单，发现仅有部分完成了。当然，这并不影响年是向上的一年在新的城市稳定连续坚持健身三个月早睡早起游戏时间大大缩减，学会生活。上一篇：《你不知道的javascript》笔记_this 写在前面这是2019年第一篇博客，回顾去年年初列的学习清单，发现仅有部分完成了。当然，这并不影响2018年是向上的一年：在新的城市稳定、...

seasonley 2019-08-23 14:32 评论0 收藏0
Deep in JS - 收藏集 - 掘金

摘要：今天同学去面试，做了两道面试题全部做错了，发过来给道典型的面试题前端掘金在界中，开发人员的需求量一直居高不下。排序算法 -- JavaScript 标准参考教程（alpha） - 前端 - 掘金来自《JavaScript 标准参考教程（alpha）》，by 阮一峰目录冒泡排序简介算法实现选择排序简介算法实现 ... 图例详解那道 setTimeout 与循环闭包的经典面...

enali 2019-08-20 16:36 评论0 收藏0
汇总有关JS对象的创建与继承

　　之前也有和大家讲过有关JS的对象创建和对象继承，本篇文章主要为大家做个汇总和梳理。　　JS中其实就是原型链继承和构造函数继承的毛病，还有就是工厂、构造、原型设计模式与JS继承。 JS高级程序设计4：class继承的重点，不只是简简单单的语法而已。　　对象创建　　不难发现，每一篇都离不开工厂、构造、原型这3种设计模式中的至少其一！　　那JS为什么非要用到这种3种设计模式了呢？？　　我们先从对...

3403771864 2023-03-27 18:33 评论0 收藏0