javascript的一些理解

shenhualong 发布于2019-08-22 15:03 / 1083人阅读

摘要：基本类型引用类型原型构造函数上有属性，为原型对象为实例对象，每个对象上都有，而指向的是原型对象，而原型对象上有属性，指向的是上一级的原型对象。

基本类型

String ,null,undefined,number,boolean

引用类型：
object

原型：

function People(name,sex){
    this.name=name;
    this.sex=sex;
}

people构造函数上有属性prototype，prototype为原型对象；

var p1=new People("canoe","girl");

p1为People实例对象，每个对象上都有__proto__，而__proto__指向的是原型对象，而原型对象上有__proto__属性，指向的是上一级的原型对象。就这么依次向上查找，直到null

各种继承，优缺点：

1.原型链继承

// 定义一个动物类
function Animal (name) {
  // 属性
  this.name = name || "Animal";
  // 实例方法
  this.sleep = function(){
    console.log(this.name + "正在睡觉！");
  }
}
// 原型方法
Animal.prototype.eat = function(food) {
  console.log(this.name + "正在吃：" + food);
};

核心：将父类的实例作为子类的原型

function Cat(){ 
}
Cat.prototype = new Animal();
Cat.prototype.name = "cat";

//　Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.eat("fish"));
console.log(cat.sleep());
console.log(cat instanceof Animal); //true 
console.log(cat instanceof Cat); //true

优点：

子类的原型是父类的实例，关系简单

父类新增原型方法/原型属性，子类都能访问到

简单，易于实现

缺点：

要想为子类新增属性和方法，必须要在new Animal()这样的语句之后执行，不能放到构造器中

无法实现多继承

来自原型对象的引用属性是所有实例共享的

创建子类实例时，无法向父类构造函数传参

2.构造继承
核心：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）

function Cat(name){
  Animal.call(this);
  this.name = name || "Tom";
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

优点：

创建子类实例时，可以向父类传递参数

可以实现多继承（call多个父类对象）

缺点：

实例并不是父类的实例，只是子类的实例

只能继承父类的实例属性和方法，不能继承原型属性/方法

无法实现函数复用，每个子类都有父类实例函数的副本，影响性能

3、实例继承

function Cat(name){
    var instance=new Animal();
    instance.name=name||"tom";
    return instance
    
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // false

优点：

不限制调用方式，不管是new 子类()还是子类(),返回的对象具有相同的效果

缺点：

实例是父类的实例，不是子类的实例

不支持多继承

4、组合继承

function Cat(name){
  Animal.call(this);
  this.name = name || "Tom";
}
Cat.prototype = new Animal();
Cat.prototype.constructor=Cat;

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true

优点：

弥补了方式2的缺陷，可以继承实例属性/方法，也可以继承原型属性/方法

既是子类的实例，也是父类的实例

不存在引用属性共享问题

可传参

函数可复用

缺点：

调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）

5、寄生组合继承

核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点

function Cat(name){
  Animal.call(this);
  this.name = name || "Tom";
}
(function(){
  // 创建一个没有实例方法的类
  var Super = function(){};
  Super.prototype = Animal.prototype;
  //将实例作为子类的原型
  Cat.prototype = new Super();
})();

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true

服务器托管私有云 javascript理解如何理解javascript 深入理解javascript java的一些代码

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

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

前端练级攻略(第二部分)

摘要：是文档的一种表示结构。这些任务大部分都是基于它。这个实践的重点是把你在前端练级攻略第部分中学到的一些东西和结合起来。一旦你进入框架部分，你将更好地理解并使用它们。到目前为止，你一直在使用进行操作。它是在前端系统像今天这样复杂之前编写的。本文是前端练级攻略第二部分，第一部分请看下面：前端练级攻略(第一部分) 在第二部分，我们将重点学习 JavaScript 作为一种独立的语言，如...

BWrong 2019-08-23 16:49 评论0 收藏0
我对JavaScript中this的一些理解

摘要：匿名函数的执行环境具有全局性，因此它的对象通常指向。如果对此有疑惑，可以看知乎上的答案知乎匿名函数的指向为什么是作为对象方法的调用，指向该对象当函数作为某个对象的方法调用时，就指这个函数所在的对象。因为日常工作中经常使用到this，而且在JavaScript中this的指向问题也很容易让人混淆一部分知识。这段时间翻阅了一些书籍也查阅了网上一些资料然后结合自己的经验，为了能让自...

focusj 2019-08-23 15:23 评论0 收藏0
【译】前端练级攻略

摘要：由于系统变得越来越复杂，人们提出了称为预处理器和后处理器的工具来管理复杂性。后处理器在由预处理器手写或编译后对应用更改。我之前建议的文章，，也涵盖了预处理器相关的知识。译者：前端小智原文：medium.freecodecamp.org/from-zero-t… medium.freecodecamp.org/from-zero-t… 我记得我刚开始学习前端开发的时候。我看到了很多文章及...

wuyumin 2019-05-22 16:41 评论0 收藏0
[译] 前端攻略-从路人甲到英雄无敌二：JavaScript 与不断演化的框架

摘要：一般来说，声明式编程关注于发生了啥，而命令式则同时关注与咋发生的。声明式编程可以较好地解决这个问题，刚才提到的比较麻烦的元素选择这个动作可以交托给框架或者库区处理，这样就能让开发者专注于发生了啥，这里推荐一波与。本文翻译自FreeCodeCamp的from-zero-to-front-end-hero-part。继续译者的废话，这篇文章是前端攻略-从路人甲到英雄无敌的下半部分，在...

roadtogeek 2019-08-19 18:25 评论0 收藏0
JS程序

摘要：设计模式是以面向对象编程为基础的，的面向对象编程和传统的的面向对象编程有些差别，这让我一开始接触的时候感到十分痛苦，但是这只能靠自己慢慢积累慢慢思考。想继续了解设计模式必须要先搞懂面向对象编程，否则只会让你自己更痛苦。 JavaScript 中的构造函数学习总结。知识只有分享才有存在的意义。是时候替换你的 for 循环大法了~ 《小分享》JavaScript中数组的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 评论0 收藏0
深入理解javascript中的立即执行函数(function(){…})()

摘要：要理解立即执行函数，需要先理解一些函数的基本概念。函数表达式使用关键字声明一个函数，但未给函数命名，最后将匿名函数赋予一个变量，叫函数表达式，这是最常见的函数表达式语法形式。 javascript和其他编程语言相比比较随意，所以javascript代码中充满各种奇葩的写法，有时雾里看花，当然，能理解各型各色的写法也是对javascript语言特性更进一步的深入理解。 ( functio...

melody_lql 2019-08-20 15:28 评论0 收藏0