JavaScript 객체 프로토 타입 프로토 타입 체인


对象的创建方法

  1. var obj = {} plainObject 객체 리터럴 / 객체 직접
  2. 건설자
    1. 시스템의 내장 생성자 new Object()
    2. 커스텀 기능 new FunctionName()

사용자 정의 함수는 큰 카멜 케이스로 이름이 지정됩니다 (모든 첫 문자는 대문자로 표시됨).

构造函数内部原理

  1. 암시 적으로 this = ()를 함수 본문 앞에 추가합니다.
  2. 이것을 실행하십시오 .xxx = xxx;
  3. 암시 적 반환

매개 변수도 전달할 수 있습니다.

    function Car(number){
    
    
        // this = {};
        this.date = 2020;
        this.number = number;

        //return this;
    }

    new car1 = new Car(1);

包装类

  • 새 번호 ()
  • 새로운 String ()
  • new Boolean ()

원래 유형에는 속성과 메소드가 없으며
실제로 호출되면 자동으로 래퍼 클래스가됩니다.

    //包装类
    var a = 1;

    a.abc = 2;
    // 不忍心报错  自动执行 
    // new Number(1).len = 2;  delete  执行完又删除了

    
    console.log(a.len); // undefined
    // 发现访问属性又自动创建 new Number(4).len  是空的 

문자열에는 .length 속성이 있으며
프로세스는 위와 동일합니다.

    var str = 'abcd';

    str.length = 2;
    // nwe String('abcd').length = 2;  delete
    
    console.log(str);  // 4
    // new String('abcd').length  本身这个属性是存在的

ps. Du Yi "Object, Packaging (Part 2)"하반기 연습

原型

.prototype – Prototype은 조상입니다.


    Person.prototype.name= 'hello';
    function Person{
    
    

    }
    var a = new Person();
    console.log(a.name);   // 输出 hello 继承自原型

프로토 타입도 이렇게 쓸 수있는 객체입니다

    Person.prototype = {
    
    
        name : 'hello'
    }
    ...
    方别写很多

그러나 나중에 언급되는 약간의 차이가 있습니다.

定义

프로토 타입은
생성자가 생성 한 객체 의 공통 조상을 정의하는 함수 객체의 속성입니다 . 생성자가 생성 한 객체는
프로토 타입 의 속성과 메서드를 상속 할 수 있습니다 . 프로토 타입도 객체입니다.

功能

코드 중복을 줄이고
공통 부분을 프로토 타입에 추가

修改原型

추가, 삭제, 수정 및 확인
은 직접 프로토 타입 작업 만 수행 할 수 있습니다.

하위 요소로 작동 할 수 없습니다.

    function Father(){
    
    
        this.num = 1;
    }
    var father = new Father();

    Son.prototype = father;
    function Son(){
    
    
        
    }
    var son = new Son();

    son.num = 2;  
    //son.num ++;   同

    console.log(father.num);  // 1

son에 새 num 속성을 추가하는 것과 동일합니다.
father 의 속성은 수정 또는 수정 (오류)
되지 않았지만 수행 할 수 있습니다.

    function Father(){
    
    
        this.num = 1;
        this.say = {
    
    
            name : 'niko'
        }
    }
    var father = new Father();

    Son.prototype = father;
    function Son(){
    
    
        
    }
    var son = new Son();

    son.say.name = 'dio';   // 二次调用 .name


    console.log(son.say.name);  // dio

성공적인 수정은 두 번째 호출에 해당하는 메서드의 속성 만 수정할 수 있습니다.

constructor

시스템의 프로토 타입에는 생성자 속성이 있고 생성자를
반환
하지만 수동으로 변경할 수 있습니다.

    

_proto_

_proto_프로토 타입 을 가리키고
프로토 타입과 하위 개체를 연결
하고 속성을 찾은 후 _proto_에서 속성을 찾습니다.

_proto_기본적으로 저장
되지만 수정할 수있는 프로토 타입

두 글의 차이점

두 번째 수정에서 차이 만들기

    Person.prototype.name = 'hello';

    function Person(){
    
    
        // 系统自动执行 var this = {_proto_ : Person.prototype}
    }

    var person = new Person();

//两种修改方式
// 1.   Person.prototype.name = 'wow';
// 2.   Person.prototype = {
    
    
//       name : 'wow'
//    }
  1. 성공적인 수정은 공간의 데이터를 직접 변경하는 것과 같습니다.

  2. Person.prototype.name은 여전히 ​​hello
    의 물결입니다 . 이 물결은 새 공간을 만드는 것입니다. 생성자의 주석은
    이해 하기 도록 _proto_의 방향을 참조합니다 .

    var obj = {
    
    name : 'a'};
    var obj1 = obj ;
    obj = {
    
    name : 'b'};   //  obj1 指向的还是a

    Person.prototype = {
    
    name : 'a'};
    _proto_ = Person.prototype;
    Person.prototype = {
    
    name : 'b'};

변경된 공간

1 방의 속성 변경
2 방 직접 변경

지금 주문을 기록하십시오! !

    Person.prototype.name = 'hello';

    function Person(){
    
    
        // 系统自动执行 var this = {_proto_ : Person.prototype}
    }

    Person.prototype = {
    
    
       name : 'wow'
    }

    var person = new Person();

이제 성공적으로 뒷면에서 새로 수정

프로토 타입 체인

프로토 타입 체인의 구성에 대해 더 많이 말할 필요는 없습니다.

추가, 삭제, 수정

위의 프로토 타입과 동일

이 작은 지식

    Son.prototype = {
    
    
        name : 'niko',
        sayName : function (){
    
    
            console.log(this.name);
        }  
    }

    function Son () {
    
    
        this.name = 'dio';
    }

    var son = new Son();   // dio

이것은 여기서 메서드를 호출 한 사람이 아들 호출임을 가리 킵니다.

Object.create (프로토 타입)

보다 편리한 시공

    var obj = {
    
    name : 'sunny' , age : 123};
    var obj1 = Object.create(obj);  // obj1 原型就是obj  可以使用name和age

    等同于
    
    Obj.prototype.name = 'sunny';
    function Obj() {
    
    

    }
    var obj1 = new Obj();
    //var obj1 = Object.creat(Obj.prototype);  和上面相等  构造函数是空的就一样

대부분의 객체 가장 터미널은 Object.prototype입니다.

프로토 타입 체인 터미널 Object.prototype
에는 toString과 같은 메소드가 있습니다 (래퍼 클래스에는 자체 toString도 있음)

에 참고 대부분의 경우, 특별한 경우가있다.
프로토 타입은 널 (null)이 될 수 Object.creat로 구성 할 때 ()

    var obj = Object.creat(null);


사람을 추가 한 후 Object.prototype 이 null로 설정된 메서드에는 속성이 없습니다 (취침 시간 의심) 및 .prototype을 _proto_사용할 수 없습니다.
_proto_

toString 재 작성

123.toString에러 포인트는 부동 소수점 숫자로 인식되어 변수에 할당됩니다
. 123의 toString은 중간 금액의 도움으로 호출됩니다 . Object 대신 Number 자신의 메서드입니다.

    var num = 123;
    num.toString();   --> // new Number(num).toString();
    
    Number.prototype.toString = function(){
    
    }   --> 有自己的toString
    Number.prototype._proto_=Object.prototype

이 상황은 方法重写다음과 같습니다. 동일한 이름의 메서드가 다른 기능을 구현합니다. z
는 프로토 타입 체인의 프런트 엔드에서 다룹니다.

ToSting (); document.write (xx);가 호출 될 때 메서드가 호출됩니다.

주제에서 벗어난 정확도

js가 일반적으로 계산할 수있는 범위는 소수점 앞 16 자리, 소수점 뒤 16 자리입니다.

전화 / 신청

함수 this point 변경하기
실행 함수에서 this 를 전달 된 객체로 변경하는 것이 목적이며,
차이점은 파라미터 목록이 다르다는 것입니다.

    var name = "1";
    var obj = {
    
    
        name:2,
        prop: {
    
    
            name:3,
            getName: function() {
    
    
                return this.name;
            }
        }
    }
    console.log(obj.prop.getName()); //3
    console.log(obj.prop.getName.call(obj)); //2
    console.log(obj.prop.getName.call(this)); //1  在全局的this 是window

3 직접 obj.prop.getName ()을 얻으려면이 메서드의 현재 객체는 prop입니다.

2를 얻으려면 obj.prop.getName.call (obj)이 obj 객체를 메서드에 전달하는 것입니다. 이번에는이 객체가 obj이고 this.name은 obj.name과 같습니다.

1은 obj.prop.getName.call (this)과 동일합니다. 여기서 이것은 현재 페이지이고 창은 동일합니다.

물론 apply를 사용할 수도 있습니다. apply와 call의 차이점은 call입니다. 즉, call 메소드는 여러 매개 변수 목록을 허용하는 반면 apply 메소드는 여러 매개 변수를 포함하는 배열을 허용합니다. apply (thisargs, [])는 배열을 사용하여 매개 변수를 call (this, param1, param2) 메소드에 전달합니다. 아래의 작은 예

    function callTest(name, price) {
    
    
        console.info(name + "-" + price);
    }
    callTest.call(this, 'superbing', 100);
 
    callTest.apply(this, ['superbing', 200]);

실용적인 예

借用别人的函数实现自己的功能

    function Person(name,age,sex){
    
    
        this.name = name;
        this.age = age;
        this.sex = sex;   // Person的this
    }

    function Student(name,age,sex,tel,grade){
    
    
        // var this ={}   等待赋值
        Person.call(this,name,age,sex);
        this.tel = tel;
        this.grade = grade;
    }

    var student = new Student('sunny',123,'male',139,2017);

Student 객체를 Person에게 전달하여 이것이 실제로 Student의 변수를 참조하도록하는데 이는
Person to Student의 세 문장을 취하는 것과 동일하며
다른 사람의 구조가 자신과 완전히 일치 할 때 축약됩니다.

프로토 타입 및 프로토 타입

이것은 좋다

추천

출처blog.csdn.net/S_aitama/article/details/107393260