javascript的一些理解

shenhualong 發(fā)布于2019-08-22 15:03 / 1257人閱讀

摘要：基本類型引用類型原型構造函數(shù)上有屬性，為原型對象為實例對象，每個對象上都有，而指向的是原型對象，而原型對象上有屬性，指向的是上一級的原型對象。

基本類型

String ,null,undefined,number,boolean

引用類型：
object

原型：

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

people構造函數(shù)上有屬性prototype，prototype為原型對象；

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

p1為People實例對象，每個對象上都有__proto__，而__proto__指向的是原型對象，而原型對象上有__proto__屬性，指向的是上一級的原型對象。就這么依次向上查找，直到null

各種繼承，優(yōu)缺點：

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

優(yōu)點：

子類的原型是父類的實例，關系簡單

父類新增原型方法/原型屬性，子類都能訪問到

簡單，易于實現(xiàn)

缺點：

要想為子類新增屬性和方法，必須要在new Animal()這樣的語句之后執(zhí)行，不能放到構造器中

無法實現(xiàn)多繼承

來自原型對象的引用屬性是所有實例共享的

創(chuàng)建子類實例時，無法向父類構造函數(shù)傳參

2.構造繼承
核心：使用父類的構造函數(shù)來增強子類實例，等于是復制父類的實例屬性給子類（沒用到原型）

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

優(yōu)點：

創(chuàng)建子類實例時，可以向父類傳遞參數(shù)

可以實現(xiàn)多繼承（call多個父類對象）

缺點：

實例并不是父類的實例，只是子類的實例

只能繼承父類的實例屬性和方法，不能繼承原型屬性/方法

無法實現(xiàn)函數(shù)復用，每個子類都有父類實例函數(shù)的副本，影響性能

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

優(yōu)點：

不限制調(diào)用方式，不管是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

優(yōu)點：

彌補了方式2的缺陷，可以繼承實例屬性/方法，也可以繼承原型屬性/方法

既是子類的實例，也是父類的實例

不存在引用屬性共享問題

可傳參

函數(shù)可復用

缺點：

調(diào)用了兩次父類構造函數(shù)，生成了兩份實例（子類實例將子類原型上的那份屏蔽了）

5、寄生組合繼承

核心：通過寄生方式，砍掉父類的實例屬性，這樣，在調(diào)用兩次父類的構造的時候，就不會初始化兩次實例方法/屬性，避免的組合繼承的缺點

function Cat(name){
  Animal.call(this);
  this.name = name || "Tom";
}
(function(){
  // 創(chuàng)建一個沒有實例方法的類
  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

云服務器 GPU云服務器 javascript理解如何理解javascript 深入理解javascript java的一些代碼

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93126.html

前端練級攻略(第二部分)

摘要：是文檔的一種表示結構。這些任務大部分都是基于它。這個實踐的重點是把你在前端練級攻略第部分中學到的一些東西和結合起來。一旦你進入框架部分，你將更好地理解并使用它們。到目前為止，你一直在使用進行操作。它是在前端系統(tǒng)像今天這樣復雜之前編寫的。本文是前端練級攻略第二部分，第一部分請看下面：前端練級攻略(第一部分) 在第二部分，我們將重點學習 JavaScript 作為一種獨立的語言，如...

BWrong 2019-08-23 16:49 評論0 收藏0
我對JavaScript中this的一些理解

摘要：匿名函數(shù)的執(zhí)行環(huán)境具有全局性，因此它的對象通常指向。如果對此有疑惑，可以看知乎上的答案知乎匿名函數(shù)的指向為什么是作為對象方法的調(diào)用，指向該對象當函數(shù)作為某個對象的方法調(diào)用時，就指這個函數(shù)所在的對象。因為日常工作中經(jīng)常使用到this，而且在JavaScript中this的指向問題也很容易讓人混淆一部分知識。這段時間翻閱了一些書籍也查閱了網(wǎng)上一些資料然后結合自己的經(jīng)驗，為了能讓自...

focusj 2019-08-23 15:23 評論0 收藏0
【譯】前端練級攻略

摘要：由于系統(tǒng)變得越來越復雜，人們提出了稱為預處理器和后處理器的工具來管理復雜性。后處理器在由預處理器手寫或編譯后對應用更改。我之前建議的文章，，也涵蓋了預處理器相關的知識。譯者：前端小智原文：medium.freecodecamp.org/from-zero-t… medium.freecodecamp.org/from-zero-t… 我記得我剛開始學習前端開發(fā)的時候。我看到了很多文章及...

wuyumin 2019-05-22 16:41 評論0 收藏0
[譯] 前端攻略-從路人甲到英雄無敵二：JavaScript 與不斷演化的框架

摘要：一般來說，聲明式編程關注于發(fā)生了啥，而命令式則同時關注與咋發(fā)生的。聲明式編程可以較好地解決這個問題，剛才提到的比較麻煩的元素選擇這個動作可以交托給框架或者庫區(qū)處理，這樣就能讓開發(fā)者專注于發(fā)生了啥，這里推薦一波與。本文翻譯自FreeCodeCamp的from-zero-to-front-end-hero-part。繼續(xù)譯者的廢話，這篇文章是前端攻略-從路人甲到英雄無敵的下半部分，在...

roadtogeek 2019-08-19 18:25 評論0 收藏0
JS程序

摘要：設計模式是以面向對象編程為基礎的，的面向對象編程和傳統(tǒng)的的面向對象編程有些差別，這讓我一開始接觸的時候感到十分痛苦，但是這只能靠自己慢慢積累慢慢思考。想繼續(xù)了解設計模式必須要先搞懂面向對象編程，否則只會讓你自己更痛苦。 JavaScript 中的構造函數(shù) 學習總結。知識只有分享才有存在的意義。是時候替換你的 for 循環(huán)大法了~ 《小分享》JavaScript中數(shù)組的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 評論0 收藏0
深入理解javascript中的立即執(zhí)行函數(shù)(function(){…})()

摘要：要理解立即執(zhí)行函數(shù)，需要先理解一些函數(shù)的基本概念。函數(shù)表達式使用關鍵字聲明一個函數(shù)，但未給函數(shù)命名，最后將匿名函數(shù)賦予一個變量，叫函數(shù)表達式，這是最常見的函數(shù)表達式語法形式。 javascript和其他編程語言相比比較隨意，所以javascript代碼中充滿各種奇葩的寫法，有時霧里看花，當然，能理解各型各色的寫法也是對javascript語言特性更進一步的深入理解。 ( functio...

melody_lql 2019-08-20 15:28 評論0 收藏0