JavaScript_javascript 기술의 일반 함수 및 생성자 비교

질문

생성자란 무엇인가요?
생성자와 일반 함수의 차이점은 무엇입니까?
new 키워드를 사용했을 때 정확히 어떤 작업을 하셨나요?
생성자에 반환 값이 있으면 어떻게 해야 합니까?
생성자를 일반 함수로 호출할 수 있나요?

다음은 제가 이해한 내용 중 일부입니다. 오해가 있으면 정정해 주세요.

이것
이는 항상 현재 실행 중인 함수나 메서드의 소유자를 가리킵니다. 예:

function test(){
  console.log(this);
}
test();
//Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}

위 코드에서는 페이지에 test() 함수를 정의한 다음 페이지에서 호출합니다. 함수가 전역적으로 정의되면 해당 소유자는 창 개체인 현재 페이지입니다.

이를 가리키는 여러 상황

1. 전 세계적으로 전화하세요

this.name //이것은 창 객체를 가리킵니다
 
2. 함수 호출

test();//test() 함수의 이 항목도 창 객체를 가리킵니다
 
3. 객체 메소드 호출

obj1.fn();//obj1 객체의 fn() 메서드에 있는 this는 obj1을 가리킵니다
 
4. 생성자를 호출합니다
var dog=new Dog();//생성자의 this는 새로 생성된 인스턴스 객체인 dogcall을 가리키고 여기에 적용

call과 Apply의 기능은 동일하지만 매개변수를 받아들이는 방식이 다릅니다. Call은 여러 개의 단일 매개변수를 받아들이는 반면 Apply는 매개변수 배열을 받아들입니다.
호출 및 적용의 역할은 간단히 말해서 객체 인스턴스에 함수/메서드가 없을 때 이를 이 객체 인스턴스로 대체하고 함수 런타임 컨텍스트를 변경하여 이미 만들어진 다른 객체의 함수/메서드를 호출할 수 있다는 것입니다.
예:

function Dog(){
  this.sound="汪汪汪";
}
Dog.prototype.bark=function(){
  alert(this.sound);
}

이제 또 다른 고양이 개체가 생겼습니다.

var cat={sound:'야옹야옹'}

또한 이 cat 개체가 짖음 메서드를 호출할 수 있기를 원합니다. 이때는 짖음 메서드를 재정의할 필요가 없습니다. 호출/적용을 사용하여 Dog 클래스의 짖음 메서드를 호출할 수 있습니다.

Dog.prototype.bark.call(고양이);

또는:

dog.bark.call(고양이);

매개변수를 사용하여 밤나무로 만들 수 있는 항목을 추가하세요.

function Dog(){
  this.sound="汪汪汪";
}
Dog.prototype.bark=function(words){
  alert(this.sound+" "+words);
}
var dog=new Dog();
dog.bark("有小偷");//alert:汪汪汪  有小偷
Dog.prototype.bark.call(cat,"饿了");//alert：喵喵喵  饿了

공통기능
이것은 단순한 일반 함수입니다:

function fn(){
  alert("hello sheila");
}
fn();//alert:hello sheila

일반 함수에는 생성자와 비교할 때 네 가지 분명한 특징이 있습니다.

1. 호출 시 새 키워드를 사용할 필요가 없습니다.

fn();2 return 문을 사용하여 값을 반환할 수 있습니다

 function fn(a,b){
    return a+b;
  }
  alert(fn(2,3));//alert:5

3. 함수 내에서 this 키워드를 사용하지 않는 것이 좋습니다
사용을 권장하지 않는다고 말씀드리고 있지만, 억지로 사용하시면 당연히 사용이 가능합니다. 이때 무슨 일이 일어나는지 주의하시면 됩니다. this 키워드를 사용하여 일반 함수 내에서 변수나 함수를 정의하면 이때 this가 윈도우 전역 객체를 가리키기 때문에 일부 전역 변수나 함수가 의도치 않게 윈도우에 추가됩니다.

function greeting(){
    this.name="sheila";
    alert("hello "+this.name);
  }
  greeting();//alert:hello sheila
  alert(window.name);//alert:sheila

4. 함수 이름은 카멜 케이스로, 첫 글자는 소문자로 표시됩니다

건축자
JavaScript에서는 new 키워드를 사용하여 정의된 생성자를 호출합니다. 기본적으로 반환되는 것은 생성자가 정의한 변수와 함수/메서드가 포함된 새 개체입니다.

예를 들어주세요:

function Prince(name,age){
  this.gender="male";
  this.kind=true;
  this.rich=true;
  this.name=name;
  this.age=age;
}
Prince.prototype.toFrog=function(){
  console.log("Prince "+this.name+" turned into a frog.");
}
var prince=new Prince("charming",25);
prince.toFrog();//Prince charming turned into a frog.
prince.kind;//true

与普通函数相比，构造函数有以下明显特点：

1.用new关键字调用

var prince=new Prince("charming",25);

2.函数内部可以使用this关键字
在构造函数内部，this指向的是构造出的新对象。用this定义的变量或函数/方法，就是实例变量或实例函数/方法。需要用实例才能访问到，不能用类型名访问。

prince.age;//25
Prince.age;//undefined

3.默认不用return返回值
构造函数是不需要用return显式返回值的，默认会返回this，也就是新的实例对象。当然，也可以用return语句，返回值会根据return值的类型而有所不同，细节将在下文介绍。

4.函数命名建议首字母大写，与普通函数区分开。
不是命名规范中的，但是建议这么写。

使用new关键字实例化的时候发生了什么？
以上文中的Prince()函数举个栗子：

1.第一步，创建一个空对象。

var prince={}

2.第二步，将构造函数Prince()中的this指向新创建的对象prince。
3.第三步，将prince的_proto_属性指向Prince函数的prototype，创建对象和原型间关系
4.第四步，执行构造函数Prince()内的代码。

构造函数有return值怎么办？
构造函数里没有显式调用return时，默认是返回this对象，也就是新创建的实例对象。
当构造函数里调用return时，分两种情况：

1.return的是五种简单数据类型：String，Number，Boolean，Null，Undefined。
这种情况下，忽视return值，依然返回this对象。

2.return的是Object
这种情况下，不再返回this对象，而是返回return语句的返回值。

function Person(name){
    this.name=name;
    return {name:"cherry"}
  }
  var person=new Person("sheila");
  person.name;//cherry
  p;//Object {name: "cherry"}