JavaScript 프로토타입을 이해하는 방법-JS 튜토리얼-php.cn

Prototype은 JavaScript 상속의 기초입니다. JavaScript 상속은 함수 A를 생성하면 브라우저가 메모리에 객체 B를 생성합니다.

JavaScript 프로토타입을 이해하는 방법

1. 프로토타입이란

프로토타입은 자바스크립트에서 상속의 기본이고, 자바스크립트 상속은 프로토타입 기반 상속입니다.

1.1 함수의 프로토타입 객체

JavaScript에서는 함수 A를 생성하고(는 함수 선언을 의미합니다), 브라우저는 메모리에 객체 B를 생성하고 각 함수에는 속성이 있습니다. prototype은 이 객체를 가리킵니다(예: prototype 속성의 값은 이 객체 입니다). 이 객체 B는 함수의 프로토타입이라고 불리는 함수 A의 프로토타입 객체입니다. 기본적으로 이 프로토타입 객체 B에는 이 함수 A를 가리키는 constructor 속성이 있습니다. 즉, 생성자 속성의 값은 함수 A입니다.

아래 코드를 보세요:

<body>
    <script type="text/javascript">
        /*
            声明一个函数，则这个函数默认会有一个属性叫 prototype 。而且浏览器会自动按照一定的规则
            创建一个对象，这个对象就是这个函数的原型对象，prototype属性指向这个原型对象。这个原型对象
            有一个属性叫constructor 执行了这个函数

            注意：原型对象默认只有属性：constructor。其他都是从Object继承而来，暂且不用考虑。
        */
        function Person () {

        }       
    </script>
</body>

로그인 후 복사

아래 그림은 함수 선언 후 어떤 일이 일어나는지 설명합니다:

1.2 생성자를 사용하여 객체 만들기

함수를 생성자로 사용할 때(이론적으로는 어떤 함수든 다음과 같이 사용할 수 있습니다.) 생성자) new를 사용하여 객체를 생성할 때 객체는 생성자의 프로토타입 객체를 가리키는 기본 visible 속성을 갖게 됩니다. 우리는 일반적으로 이 보이지 않는 속성을 나타내기 위해 [[prototype]]을 사용하지만 이 속성은 직접 접근할 수 없습니다.

아래 코드를 보세요:

<body>
    <script type="text/javascript">
        function Person () {

        }   
        /*
            利用构造函数创建一个对象，则这个对象会自动添加一个不可见的属性 [[prototype]], 而且这个属性
            指向了构造函数的原型对象。
        */
        var p1 = new Person();
    </script>
</body>

로그인 후 복사

아래 다이어그램을 관찰하세요:

설명:

위 다이어그램에서 볼 수 있듯이, Person 생성자는 p1 개체를 만드는 데 사용되지만, 객체가 생성된 후 이 p1 객체는 실제로 Person 생성자와 아무 관련이 없습니다. p1 객체의 [[ 프로토타입 ]] 속성은 Person 생성자의 프로토타입 객체를 가리킵니다.
new Person()을 사용하여 여러 객체를 생성하면 여러 객체가 동시에 Person 생성자의 프로토타입 객체를 가리킵니다.
이 프로토타입 개체에 속성과 메서드를 수동으로 추가한 다음 p1, p2, p3... 이러한 개체는 프로토타입에 추가된 이러한 속성과 메서드를 공유할 수 있습니다.
p1의 속성 이름에 액세스하고 p1 객체에서 발견되면 직접 반환됩니다. p1 객체에서 발견되지 않으면 p1 객체의 [[prototype]] 속성이 가리키는 프로토타입 객체에서 직접 검색하여 발견되면 반환합니다. (프로토타입에서 발견되지 않으면 계속해서 프로토타입의 프로토타입-프로토타입 체인을 찾아보세요. 이에 대해서는 나중에 자세히 설명합니다.)
p1 개체를 통해 속성 이름이 추가되면 프로토타입의 속성 이름이 p1 개체에 대해 차단됩니다. 즉, p1의 프로토타입 속성 이름에 액세스할 수 있는 방법이 없습니다.
p1 객체를 통해서는 프로토타입의 속성 이름 값을 읽을 수만 있고, 프로토타입의 속성 이름 값은 수정할 수 없습니다. p1.name = "lee思"; 프로토타입의 값을 수정하지 않고 p1 객체에 속성 이름을 추가합니다.

아래 코드를 보세요:

<body>
    <script type="text/javascript">
        function Person () {        
        }
        // 可以使用Person.prototype 直接访问到原型对象
        //给Person函数的原型对象中添加一个属性 name并且值是 "张三"
        Person.prototype.name = "张三";
        Person.prototype.age = 20;

        var p1 = new Person();
        /*
            访问p1对象的属性name，虽然在p1对象中我们并没有明确的添加属性name，但是
            p1的 [[prototype]] 属性指向的原型中有name属性，所以这个地方可以访问到属性name
            就值。
            注意：这个时候不能通过p1对象删除name属性，因为只能删除在p1中删除的对象。
        */
        alert(p1.name);  // 张三

        var p2 = new Person();
        alert(p2.name);  // 张三  都是从原型中找到的，所以一样。

        alert(p1.name === p2.name);  // true

        // 由于不能修改原型中的值，则这种方法就直接在p1中添加了一个新的属性name，然后在p1中无法再访问到
        //原型中的属性。
        p1.name = "李四";
        alert("p1：" + p1.name);
        // 由于p2中没有name属性，则对p2来说仍然是访问的原型中的属性。    
        alert("p2:" + p2.name);  // 张三  
    </script>
</body>

로그인 후 복사

2. 프로토타입과 관련된 여러 속성과 메서드

2.1 프로토타입 속성

prototype은 생성자에 존재합니다(사실 어떤 함수에도 존재합니다) ) , 생성자가 아닌 경우 프로토타입에 주의를 기울이지 않습니다.) 프로토타입은 이 생성자의 프로토타입 객체를 가리킵니다.

이전 다이어그램을 참조하세요.

2.2 생성자 속성

생성자 속성은 프로토타입 객체에 존재하며 생성자를 가리킵니다.

다음 코드를 보세요:

<script type="text/javascript">
    function Person () {
    }
    alert(Person.prototype.constructor === Person); // true
    var p1 = new Person();
    //使用instanceof 操作符可以判断一个对象的类型。  
    //typeof一般用来获取简单类型和函数。而引用类型一般使用instanceof，因为引用类型用typeof 总是返回object。
    alert(p1 instanceof Person);    // true
</script>

로그인 후 복사

Person과 함께 필요에 따라 새 객체를 Person으로 지정할 수 있습니다. .prototype 속성 프로토타입 객체.
하지만 이때 문제가 있습니다. 새 개체의 생성자 속성은 더 이상 Person 생성자를 가리키지 않습니다.

아래 코드를 보세요:

<script type="text/javascript">
    function Person () {

    }
    //直接给Person的原型指定对象字面量。则这个对象的constructor属性不再指向Person函数
    Person.prototype = {
        name:"志玲",
        age:20
    };
    var p1 = new Person();
    alert(p1.name);  // 志玲

    alert(p1 instanceof Person); // true
    alert(Person.prototype.constructor === Person); //false
    //如果constructor对你很重要，你应该在Person.prototype中添加一行这样的代码：
    /*
    Person.prototype = {
        constructor : Person    //让constructor重新指向Person函数
    }
    */
</script>

로그인 후 복사

2.3 __proto__ 속성 (참고: 왼쪽과 오른쪽에 밑줄이 2개 있습니다)

생성자 메소드를 사용하여 새 객체를 생성한 후에는 여기에 접근할 수 없는 속성이 있을 것입니다. 기본적으로 object [ [prototype]] , 이 속성은 생성자의 프로토타입 개체를 가리킵니다.

그러나 개별 브라우저에서는 이 속성 [[prototype]]에 대한 액세스도 제공됩니다(Chrome 브라우저 및 Firefox 브라우저. IE 브라우저는 지원하지 않음). 액세스 방법: p1.__proto__

그러나 개발자는 이러한 방식으로 액세스하지 않으려고 합니다. 부주의한 조작으로 인해 이 객체의 상속 프로토타입 체인이 변경되기 때문입니다.

<script type="text/javascript">
    function Person () {

    }
    //直接给Person的原型指定对象字面量。则这个对象的constructor属性不再指向Person函数
    Person.prototype = {
        constructor : Person,
        name:"志玲",
        age:20
    };
    var p1 = new Person();

    alert(p1.__proto__ === Person.prototype);   //true

</script>

로그인 후 복사

2.4 hasOwnProperty() 메서드

大家知道，我们用去访问一个对象的属性的时候，这个属性既有可能来自对象本身，也有可能来自这个对象的[[prototype]]属性指向的原型。

那么如何判断这个对象的来源呢？

hasOwnProperty方法，可以判断一个属性是否来自对象本身。

<script type="text/javascript">
    function Person () {

    }
    Person.prototype.name = "志玲";
    var p1 = new Person();
    p1.sex = "女";
    //sex属性是直接在p1属性中添加，所以是true
    alert("sex属性是对象本身的：" + p1.hasOwnProperty("sex"));
    // name属性是在原型中添加的，所以是false
    alert("name属性是对象本身的：" + p1.hasOwnProperty("name"));
    //  age 属性不存在，所以也是false
    alert("age属性是存在于对象本身：" + p1.hasOwnProperty("age"));

</script>

로그인 후 복사

所以，通过hasOwnProperty这个方法可以判断一个对象是否在对象本身添加的，但是不能判断是否存在于原型中，因为有可能这个属性不存在。
也即是说，在原型中的属性和不存在的属性都会返回fasle。
如何判断一个属性是否存在于原型中呢？

2.5 in 操作符

in操作符用来判断一个属性是否存在于这个对象中。但是在查找这个属性时候，现在对象本身中找，如果对象找不到再去原型中找。换句话说，只要对象和原型中有一个地方存在这个属性，就返回true

<script type="text/javascript">
    function Person () {

    }
    Person.prototype.name = "志玲";
    var p1 = new Person();
    p1.sex = "女";
    alert("sex" in p1);     // 对象本身添加的，所以true
    alert("name" in p1);    //原型中存在，所以true
    alert("age" in p1);     //对象和原型中都不存在，所以false

</script>

로그인 후 복사

回到前面的问题，如果判断一个属性是否存在于原型中：
如果一个属性存在，但是没有在对象本身中，则一定存在于原型中。

<script type="text/javascript">
    function Person () {
    }
    Person.prototype.name = "志玲";
    var p1 = new Person();
    p1.sex = "女";

    //定义一个函数去判断原型所在的位置
    function propertyLocation(obj, prop){
        if(!(prop in obj)){
            alert(prop + "属性不存在");
        }else if(obj.hasOwnProperty(prop)){
            alert(prop + "属性存在于对象中");
        }else {
            alert(prop + "对象存在于原型中");
        }
    }
    propertyLocation(p1, "age");
    propertyLocation(p1, "name");
    propertyLocation(p1, "sex");
</script

로그인 후 복사

三、组合原型模型和构造函数模型创建对象

3.1 原型模型创建对象的缺陷

原型中的所有的属性都是共享的。也就是说，用同一个构造函数创建的对象去访问原型中的属性的时候，大家都是访问的同一个对象，如果一个对象对原型的属性进行了修改，则会反映到所有的对象上面。

但是在实际使用中，每个对象的属性一般是不同的。张三的姓名是张三，李四的姓名是李四。

==但是，这个共享特性对方法(属性值是函数的属性)又是非常合适的。==所有的对象共享方法是最佳状态。这种特性在c#和Java中是天生存在的。

3.2 构造函数模型创建对象的缺陷

在构造函数中添加的属性和方法，每个对象都有自己独有的一份，大家不会共享。这个特性对属性比较合适，但是对方法又不太合适。因为对所有对象来说，他们的方法应该是一份就够了，没有必要每人一份，造成内存的浪费和性能的低下。

<script type="text/javascript">
    function Person() {
        this.name = "李四";
        this.age = 20;
        this.eat = function() {
            alert("吃完东西");
        }
    }
    var p1 = new Person();
    var p2 = new Person();
    //每个对象都会有不同的方法
    alert(p1.eat === p2.eat); //fasle
</script>

로그인 후 복사

可以使用下面的方法解决：

<script type="text/javascript">
    function Person() {
        this.name = "李四";
        this.age = 20;
        this.eat = eat;
    }
    function eat() {
        alert("吃完东西");
    }
    var p1 = new Person();
    var p2 = new Person();
    //因为eat属性都是赋值的同一个函数，所以是true
    alert(p1.eat === p2.eat); //true
</script>

로그인 후 복사

但是上面的这种解决方法具有致命的缺陷：封装性太差。使用面向对象，目的之一就是封装代码，这个时候为了性能又要把代码抽出对象之外，这是反人类的设计。

3.3 使用组合模式解决上述两种缺陷

原型模式适合封装方法，构造函数模式适合封装属性，综合两种模式的优点就有了组合模式。

<script type="text/javascript">
    //在构造方法内部封装属性
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    //在原型对象内封装方法
    Person.prototype.eat = function (food) {
        alert(this.name + "爱吃" + food);
    }
    Person.prototype.play = function (playName) {
        alert(this.name + "爱玩" + playName);
    }

    var p1 = new Person("李四", 20);
    var p2 = new Person("张三", 30);
    p1.eat("苹果");
    p2.eat("香蕉");
    p1.play("志玲");
    p2.play("凤姐");
</script>

로그인 후 복사

四、动态原型模式创建对象

前面讲到的组合模式，也并非完美无缺，有一点也是感觉不是很完美。把构造方法和原型分开写，总让人感觉不舒服，应该想办法把构造方法和原型封装在一起，所以就有了动态原型模式。

动态原型模式把所有的属性和方法都封装在构造方法中，而仅仅在需要的时候才去在构造方法中初始化原型，又保持了同时使用构造函数和原型的优点。

看下面的代码：

<script type="text/javascript">
    //构造方法内部封装属性
    function Person(name, age) {
        //每个对象都添加自己的属性
        this.name = name;
        this.age = age;
        /*
            判断this.eat这个属性是不是function，如果不是function则证明是第一次创建对象，
            则把这个funcion添加到原型中。
            如果是function，则代表原型中已经有了这个方法，则不需要再添加。
            perfect！完美解决了性能和代码的封装问题。
        */
        if(typeof this.eat !== "function"){
            Person.prototype.eat = function () {
                alert(this.name + " 在吃");
            }
        }
    }
    var p1 = new Person("志玲", 40);
    p1.eat();   
</script>

로그인 후 복사

推荐教程：《JS教程》

위 내용은 JavaScript 프로토타입을 이해하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!