지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > JavaScript 기본 지식 포인트 요약

JavaScript 기본 지식 포인트 요약

高洛峰
풀어 주다： 2017-01-21 09:44:43
원래의
1345명이 탐색했습니다.

함수 외부에 정의된 변수는 전역 변수여야 합니다. 함수 내에 정의된 변수의 경우 var가 선언되면 변수는 지역 변수입니다.

1. 전역변수와 지역변수

JavaScript

var global = "Global";
test();
function test(){
  var local = "Local";
  document.writeln(global);
  document.writeln(local);
}
document.writeln(global);
document.writeln(local);
로그인 후 복사

2가지 종류의 쿠키

i ) 클라이언트의 하드 드라이브에 저장되는 영구 쿠키입니다.

ii) 세션 쿠키: 클라이언트의 하드 드라이브에 저장되지 않고 브라우저 프로세스의 메모리에 저장되며 브라우저가 닫히면 세션 쿠키가 삭제됩니다.

3. 자바스크립트에서는 함수가 객체입니다

4. 자바스크립트에서는 메소드(함수) 오버로딩이라는 개념이 없습니다

5.

자바스크립트에는 Function 객체가 있으며, 모든 사용자 정의 함수는 Function 객체 유형입니다. Function 객체가 허용하는 모든 매개변수는 문자열 유형이며, 마지막 매개변수는 실행될 함수 본문이고, 이전 매개변수는 함수가 실제로 허용해야 하는 매개변수입니다.

6. 암시적 개체 인수

JavaScript에서 각 함수에는 실제로 함수에 전달되는 매개 변수를 나타내는 암시적 개체 인수가 있습니다. args.length는 실제로 전달된 매개변수의 수를 나타냅니다.

7. 함수 이름.길이

각 함수 객체에는 함수가 허용할 것으로 예상되는 매개변수 수를 나타내는 길이 속성이 있습니다. 함수의 인수와는 다릅니다. 인수.길이는 함수에서 실제로 허용하는 매개변수 수를 나타냅니다.

8. JavaScript에는

정의되지 않음, Null, 부울, 숫자 및 문자열의 다섯 가지 기본 데이터 유형이 있습니다. (참고: JavaScript에는 char 데이터 유형이 없습니다.)

정의되지 않은 데이터 유형은 하나의 값만 가집니다.

Null 데이터 유형은 하나의 값만 가집니다: null;

부울 데이터 유형에는 true와 false의 두 가지 값이 있습니다.

9. typeof 연산자

typeof는 변수 이름이 뒤에 오는 단항 연산자입니다. 변수의 데이터 유형을 얻으십시오. 정의되지 않음, 부울, 숫자, 문자열 및 객체의 5가지 반환 값이 있습니다.

10. JavaScript에서는 함수가 반환 값을 선언하지 않으면 undefine11을 반환합니다.

undefine은 실제로 null에서 파생됩니다. 예:

null과 정의되지 않은 관계

JavaScript

alert(undefined == null);
//浏览器返回true
로그인 후 복사

11. 강제 유형 변환에는 3가지 유형이 있습니다

<🎜. > JavaScript Casting: Boolean(값), Number(값), String(값).

12. 객체 객체

자바스크립트에서는 모든 객체가 객체 객체에서 상속됩니다.

Object 객체

JavaScript

var object = new Object();
for(var v in object){
  alert(v);
}
로그인 후 복사

위 코드에서 브라우저는 아무것도 인쇄하지 않습니다. 그렇다고 Object 객체가 인쇄되지 않는다는 의미는 아닙니다. 어떤 재산을 가지고 있습니다. 다음 코드는 Object 개체의 속성을 열거할 수 있는지 여부를 테스트합니다. false가 반환되면 Object 개체의 속성을 열거할 수 없음을 의미합니다.

Object 개체의 속성을 열거할 수 없습니다.

JavaScript

alert(object.propertyIsEnumerable("prototype"));
로그인 후 복사

브라우저에 잘못된 대화 상자가 표시되어 개체의 속성이 객체 객체 열거할 수 없습니다.

다음으로 window 객체의 속성이 열거 가능한지 살펴보겠습니다

window 객체의 속성이 열거 가능한지

JavaScript

for (var v in window) {
  console.log(v);
}
로그인 후 복사

Chrome 브라우저에서는 브라우저 디버깅 콘솔에 인쇄된 많은 속성을 볼 수 있는데, 이는 창 개체의 속성을 열거할 수 있음을 나타냅니다.

13. JavaScript에서는 객체 속성을 동적으로 추가하거나 삭제할 수 있습니다.

객체 속성을 동적으로 추가/삭제

JavaScript

var object = new Object();
alert(object.username);//undefined
  
object.username = "zhangsan";
alert(object.username);//zhangsan
  
object["password"] = "123";
alert(object.password);//123
  
delete object.username;//此时，username属性已经被删除
alert(object.username);
로그인 후 복사

14. JavaScript에서 객체를 정의하는 가장 일반적인 방법

객체를 정의하는 가장 일반적인 방법

JavaScript

var object = {
  username:"zhangsan",
  password:12345
};
alert(object.username);
alert(object.password);
로그인 후 복사

15. 배열

배열 정의

JavaScript

//方法一
var array = new Array();
array.push(1);
array.push(2);
array.push(3);
alert(array.length);
  
//方法二（推荐）
var array = [1,25,4];
array.sort();
alert(array);
로그인 후 복사

배열의 sort() 메소드를 호출하고 프로세서가 1을 인쇄합니다. , 25, 4, 이는 우리가 기대하는 것과 다릅니다.

JavaScript 배열의 정렬 방법의 경우 먼저 정렬할 내용을 문자열로 변환하고(toString() 메서드 호출) 문자열 순서에 따라 정렬합니다.

다음 방법을 사용하면 예상한 결과를 얻을 수 있습니다(배열 크기별로 정렬).

Array sort

JavaScript

function compare(num1,num2) {
  var temp1 = parseInt(num1);
  var temp2 = parseInt(num2);
  if (temp1 < temp2) {
    return -1;
  } else if (temp1 == temp2) {
    return 0;
  } else {
    return 1;
  }
}
  
var array = [1,25,3];
array.sort(compare);
alert(array);
로그인 후 복사

그런 다음 익명 함수를 사용하여 다음을 구현합니다.

익명 함수 정렬

JavaScript

var array = [1,25,3];
  
array.sort(function(num1,num2){
  var temp1 = parseInt(num1);
  var temp2 = parseInt(num2);
  if (temp1 < temp2) {
    return -1;
  } else if(temp1 == temp2) {
    return 0;
  } else {
    return 1;
  }
});
  
alert(array);
로그인 후 복사

16. JavaScript에서 객체를 정의하는 5가지 방법(JavaScript에는 클래스 개념 없음, 객체만) i) 기존 객체를 기반으로 속성 및 메소드 확장

기존 객체를 기반으로 속성 및 메소드 확장

JavaScript

var object = new Object();
//添加name属性
object.name = "zhangsan";
//添加sayName方法
object.sayName = function(name) {
  this.name = name;
  alert(this.name);
};
object.sayName("kyle");//调用sayName方法，name属性被修改为kyle，浏览器将打印kyle
로그인 후 복사

사용하기 편리하지 않은 가장 간단한 방법은 개체가 일시적으로 필요한 경우에 적합합니다.

ii) 팩토리 모드에서 객체 생성

매개변수가 없는 팩토리 메소드:

JavaScript

//工厂方法
function createObject() {
  var object = new Object();//创建一个对象
  object.name = "zhangsan";//为该对象添加一个name属性
  object.password = "123";//为该对象添加一个password属性
  object.get = function() {//为该对象添加一个get方法
    alert(this.name+","+this.password);
  };
  return object;//返回该对象
}
  
var object1 = createObject();//调用createObject工厂方法创建对象object1
var object2 = createObject();//调用createObject工厂方法创建对象object2
object1.get();//调用对象get方法
object2.get();//调用对象get方法
로그인 후 복사

매개변수가 있는 팩토리 메소드:

JavaScript

function createObject(name,password) {
  var object = new Object();
  object.name = name;
  object.password = password;
  object.get = function() {
    alert(this.name+","+this.password);
  };
  return object;
}
  
var object1 = createObject("zhangsan","123");
var object2 = createObject("lisi","456");
object1.get();
object2.get();
로그인 후 복사

매개변수가 없는 위의 두 팩토리 메소드와 매개변수가 있는 팩토리 메소드의 단점:

객체가 생성될 때마다 메모리 get 메소드는 메모리를 낭비하고 성능에 영향을 미칩니다. 우리의 기대는 두 개의 서로 다른 개체를 만드는 것입니다. 해당 개체의 속성은 다르지만 메서드는 공유됩니다. 따라서 다음으로 createObject 팩토리 메소드를 개선해야 합니다.

개선된 팩토리 방식:

JavaScript

function get(){
  alert(this.name+","+this.password);
}
  
function createObject(name,password) {
  var object = new Object();
  object.name = name;
  object.password = password;
  object.get = get;
  return object;
}
  
var object1 = createObject("zhangsan","123");
var object2 = createObject("lisi","456");
object1.get();
object2.get();
로그인 후 복사

将get方法定义在createObject函数外面，这样每创建一个对象，get方法都是共用的。让一个函数对象被多个对象所共享，而不是每一个对象都拥有一个函数对象。

iii）构造函数方式创建对象

不带参数的构造函数：

JavaScript

function Person(){
  //在执行第一行代码前，js引擎会为我们生成一个对象
  this.name = "zhangsan";
  this.password = "123";
  this.getInfo = function() {
    alert(this.name+","+this.password);
  };
  
  //此处有一个隐含的return语句，用于将之前生成的对象返回（也是跟工厂方式不一样的地方）
}
  
var p1 = new Person();
p1.getInfo();
로그인 후 복사

带参数的构造函数

JavaScript

function Person(name,password) {
  this.name = name;
  this.password = password;
  this.getInfo = function() {
    alert(this.name+","+this.password);
  };
}
  
var p1 = new Person("zhangsan","123");
var p2 = new Person("lisi","456");
p1.getInfo();
p2.getInfo();
로그인 후 복사

iv）原型（prototype）方式创建对象

prototype是Object对象里面的一个属性

prototype

JavaScript

function Person(){
  
}
Person.prototype.name = "zhangsan";
Person.prototype.password = "123";
Person.prototype.getInfo = function() {
  alert(this.name+","+this.password);
};
  
var p1 = new Person();
var p2 = new Person();
p1.name = "kyle";//对象生成之后再去改变属性
p1.getInfo();
p2.getInfo();
로그인 후 복사

单纯地使用原型方式有两个问题：第一，你无法在构造函数中为属性赋初值，只能在对象生成之后再去改变属性值。

prototype

JavaScript

function Person(){
  
}
Person.prototype.name = new Array();
Person.prototype.password = "123";
Person.prototype.getInfo = function() {
  alert(this.name+","+this.password);
};
  
var p1 = new Person();
var p2 = new Person();
p1.name.push("zhangsan");
p1.name.push("lisi");
p1.password = "456";
p1.getInfo();
p2.getInfo()
로그인 후 복사

浏览器将会打印：zhangsan，lisi，456 和 zhangsan，lisi，123.

如果使用原型方式创建对象，那么生成的所有对象会共享原型中的属性，这样一个对象改变了该属性也会反应到其他对象当中。所以单纯地使用原型方式是不行的，还需要结合其他方式。接下来我们会继续介绍。

使用原型+构造函数方式来定义对象

JavaScript

function Person() {
  this.name = new Array();
  this.password = "123";
}
Person.prototype.getInfo = function() {
  alert(this.name+","+this.password);
};
  
var p1 = new Person();
var p2 = new Person();
p1.name.push("zhangsan");
p2.name.push("lisi");
p1.getInfo();
p2.getInfo();
로그인 후 복사

使用原型+构造函数方式来定义对象，对象之间的属性互不干扰，各个对象间共享同一个方法，这是一种比较好的方式。

v）动态原型方式

JavaScript

function Person(){
  this.name = "zhangsan";
  this.password = "123";
  if(typeof Person.flag == "undefined"){
    alert("invoked");
    Person.prototype.getInfo = function(){
      alert(this.name + "," + this.password);
    }
    Person.flag = true;
  }   
}
  
var p1 = new Person();
var p2 = new Person();
p1.getInfo();
p2.getInfo();
로그인 후 복사

在动态原型方式中，在构造函数中通过标志量让所有对象共享一个方法，而每个对象拥有自己的属性。上面代码在第一次创建对象时，首先通过一个判断语句，看flag属性是否已经定义，若没有定义，则通过原型方式添加getInfo方法，然后将flag设置为true，那么当第二次创建对象时，if语句判断为假，跳过执行。这样就达到了我们所期望的结果，创建的对象属性是互不干扰的，而对象的方法是共享的。

17、JavaScript中对象的继承（5种方式）

第一种方式:对象冒充

冒充对象继承

JavaScript

//父类
function Parent(username) {
  this.username = username;
  this.sayHello = function() {
    alert(this.username);
  };
}
//子类
function Child(username,password){
  //下面三行代码是最关键的
  this.method = Parent;
  this.method(username);
  delete this.method;
  
  this.password = password;
  this.sayWorld = function() {
    alert(this.password);
  };
}
  
var p = new Parent("zhangsan");
var c = new Child("lisi","123");
  
p.sayHello();
c.sayHello();
c.sayWorld()
로그인 후 복사

第二种方式:call()

继承的第二种实现方式，call方法方式，call方法是Function对象中定义的方法，因此我们定义的每个函数都拥有该方法。call方法的第一个参数会被传递给函数中的this，从第2个参数开始，逐一赋给函数中的参数。

call 继承父类

JavaScript

function test(str) {
  alert(this.name+","+str);
}
var object = new Object();
object.name = "zhangsan";
//test.call相当于调用了test函数
test.call(object,"html5war");//将object赋给了this
로그인 후 복사

接下来我们用call方式实现对象的继承

JavaScript

//父类
function Parent(username){
  this.username = username;
  this.sayHello = function() {
    alert(this.username);
  };
}
//子类
function Child(username,password) {
  Parent.call(this,username);
  this.password = password;
  this.sayWorld = function() {
    alert(this.password);
  };
}
  
var p = new Parent("zhangsan");
var c = new Child("lisi","123");
p.sayHello();
c.sayHello();
c.sayWorld();
로그인 후 복사

第三种方式:apply()

apply 继承父类

JavaScript

//父类
function Parent(username){
  this.username = username;
  this.sayHello = function(){
    alert(this.username);
  };
}
//子类
function Child(username,password){
  Parent.apply(this,new Array(username));
  this.password = password;
  this.sayWorld = function(){
    alert(this.password);
  };
}
  
var p = new Parent("zhangsan");
var c = new Child("lisi","123");
p.sayHello();
c.sayHello();
c.sayWorld();
로그인 후 복사

apply方法与call方法很类似，apply方法也是定义在Function对象中的方法，因此我们定义的每个函数都拥有该方法。

apply方法与call方法有一个区别：Parent.apply(this,new Array(username));传递的第二个参数为一个数组，而call方法传递的是一些离散的数据参数。这两个方法并不能说谁好谁坏，要看具体使用场景。

第四种方式:原型链方式（无法给构造函数传递参数）

原型链继承

JavaScript

function Parent() {
  
}
Parent.prototype.hello = "hello";
Parent.prototype.sayHello = function() {
  alert(this.hello);
};
  
function Child() {
  
}
Child.prototype = new Parent();
  
Child.prototype.world = "world";
Child.prototype.sayWorld = function() {
  alert(this.world);
};
  
var c = new Child();
  
c.sayHello();
c.sayWorld();
로그인 후 복사

单纯使用原型链方式的缺点：没有办法传递参数，只有等对象创建完之后再去修改。我们接下来结合其它的方式解决这个问题。

第五种方式:混合方式(推荐)

使用混合方式实现对象的继承

JavaScript

function Parent(hello) {
  this.hello = hello;
}
Parent.prototype.sayHello = function() {
  alert(this.hello);
}
  
function Child(hello,world) {
  Parent.call(this,hello);
  this.world = world;
}
Child.prototype = new Parent();
Child.prototype.sayWorld = function() {
  alert(this.world);
}
  
var c = new Child("hello","world");
c.sayHello();
c.sayWorld();
로그인 후 복사

以上这篇JavaScript基础知识点归纳(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。

更多JavaScript基础知识点归纳相关文章请关注PHP中文网！

관련 라벨：
JavaScript 基础
원천：php.cn
이전 기사：JS 기본 에세이(초보자가 꼭 읽어야 할 필독서) 다음 기사：Javascript 기본 학습 노트(초보자가 꼭 읽어야 할 내용)
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
모달 카운터 +/- 카운터를 사용하여 모달을 만들려고 합니다. 그러나 상태가 기본 구성 요소에 있으므로 모달이 이를 인식하지 못하는 것 같습니다. 문제를 해결하는 방법을 아시...
에서 2024-04-03 14:16:44
0
1
298
Mechanize를 사용하여 .aspx 웹 사이트에서 GUID를 추출하기 위한 POST 요청 전역적으로 고유한 식별자를 생성하는 https://www.guidgenerator.com/online-guid-generator.aspx라는 웹사이트가 있습니다....
에서 2024-04-02 12:43:40
0
1
420
버튼 활성화로 인해 호버 효과가 오작동함 저는 웹 개발의 기초(HTML, CSS, JS)를 배우려고 노력해왔기 때문에 작동하는 Apple 계산기를 만들어 보려고 노력해 왔습니다. 작은 버그를 발견하기 전...
에서 2024-04-01 21:51:26
0
1
396
CSS + HTML을 사용하여 텍스트를 가운데에 맞출 수 없습니다. CSS와 HTML을 사용하여 텍스트를 중앙에 맞추려고 합니다. 저는 웹 개발이 처음이라 이제 막 시작했습니다. 기본 과정(첫 번째 페이지 만들기)을 시청했고 지금...
에서 2024-03-31 15:57:04
0
1
322
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿