search
HomeWeb Front-endJS TutorialA daily javascript learning summary (object-oriented programming)_javascript skills

1. Object-oriented factory method

 function createPerson(name, age, job){
   var o = new Object();
   o.name = name;
   o.age = age;
   o.job = job;
   o.sayName = function(){
    alert(this.name);
   }; 
   return o;
  }
  
  var person1 = createPerson("Nicholas", 29, "Software Engineer");
  var person2 = createPerson("Greg", 27, "Doctor");
  
  person1.sayName(); //"Nicholas"
  person2.sayName(); //"Greg"

The disadvantage of the factory model method is that it will generate a lot of duplicate code!

2. Constructor pattern creates objects

 function Person(name, age, job){
   this.name = name;
   this.age = age;
   this.job = job;
   this.sayName = function(){
    alert(this.name);
   }; 
  }
  
  var person1 = new Person("Nicholas", 29, "Software Engineer");
  var person2 = new Person("Greg", 27, "Doctor");
  
  person1.sayName(); //"Nicholas"
  person2.sayName(); //"Greg"
  
  alert(person1 instanceof Object); //true
  alert(person1 instanceof Person); //true
  alert(person2 instanceof Object); //true
  alert(person2 instanceof Person); //true
  
  alert(person1.constructor == Person); //true
  alert(person2.constructor == Person); //true
  
  alert(person1.sayName == person2.sayName); //false  

Using the new keyword to create an object will go through the following four processes

  • 1. Create a new object
  • 2. Assign the scope of the constructor to a new object (so this points to this new object)
  • 3. Method to execute the constructor (assign a value to this new object)
  • 4. Return new object

3. Use the constructor as a function

 function Person(name, age, job){
   this.name = name;
   this.age = age;
   this.job = job;
   this.sayName = function(){
    alert(this.name);
   };
  }
  
  var person = new Person("Nicholas", 29, "Software Engineer");
  person.sayName(); //"Nicholas"
  
  Person("Greg", 27, "Doctor"); //adds to window
  window.sayName(); //"Greg"
  
  var o = new Object();
  Person.call(o, "Kristen", 25, "Nurse");
  o.sayName(); //"Kristen"

When used as a function, the constructor is no different from an ordinary function. It is just a method added under the window object. Since the object created by the constructor actually creates a new object, the two are essentially different and separated, and their methods are still different!

4. Use common methods to solve inconsistent problems globally

 function Person(name, age, job){
   this.name = name;
   this.age = age;
   this.job = job;
   this.sayName = sayName;
  }
  
  function sayName(){
   alert(this.name);
  }
  
  var person1 = new Person("Nicholas", 29, "Software Engineer");
  var person2 = new Person("Greg", 27, "Doctor");
  
  person1.sayName(); //"Nicholas"
  person2.sayName(); //"Greg"
  
  alert(person1 instanceof Object); //true
  alert(person1 instanceof Person); //true
  alert(person2 instanceof Object); //true
  alert(person2 instanceof Person); //true
  
  alert(person1.constructor == Person); //true
  alert(person2.constructor == Person); //true
  
  alert(person1.sayName == person2.sayName); //true  

Although the above method solves the same problem, the defined global method itself belongs to the window, so there is no separation between local and global! So this method is rarely used! Not recommended either.

5. Prototype mode

Any function we create has a prototype object. This attribute is a pointer, which points to an object, and the function of this object is to have methods that can be shared by all instances of a specific type!

 function Person(){
  }
  
  Person.prototype.name = "Nicholas";
  Person.prototype.age = 29;
  Person.prototype.job = "Software Engineer";
  Person.prototype.sayName = function(){
   alert(this.name);
  };
  
  var person1 = new Person();
  person1.sayName(); //"Nicholas"
  
  var person2 = new Person();
  person2.sayName(); //"Nicholas"
  
  alert(person1.sayName == person2.sayName); //true
  
  alert(Person.prototype.isPrototypeOf(person1)); //true
  alert(Person.prototype.isPrototypeOf(person2)); //true
  
  //only works if Object.getPrototypeOf() is available
  if (Object.getPrototypeOf){
   alert(Object.getPrototypeOf(person1) == Person.prototype); //true
   alert(Object.getPrototypeOf(person1).name); //"Nicholas"
  }

Understanding prototypes

Whenever a function is created, a prototype property is created, which points to the prototype object of the function. By default, the prototype object will contain a constructor (constructor attribute), which contains a pointer to the function where the prototype attribute is located!

The order of attribute reading

Every time the code reads the properties of an object, it will perform a search. The target is the property with the given name. The search starts from the instance of the object itself. If there is one, it will be returned. If not, it will continue to search for the object. Prototype chain until the outermost layer of the prototype chain is searched!

 function Person(){
  }
  
  Person.prototype.name = "Nicholas";
  Person.prototype.age = 29;
  Person.prototype.job = "Software Engineer";
  Person.prototype.sayName = function(){
   alert(this.name);
  };
  
  var person1 = new Person();
  var person2 = new Person();
  
  person1.name = "Greg";
  alert(person1.name); //"Greg" 来自实例
  alert(person2.name); //"Nicholas" 来自原型

If the instance attribute of this element is deleted

function Person(){
  }
  
  Person.prototype.name = "Nicholas";
  Person.prototype.age = 29;
  Person.prototype.job = "Software Engineer";
  Person.prototype.sayName = function(){
   alert(this.name);
  };
  
  var person1 = new Person();
  var person2 = new Person();
  
  person1.name = "Greg";
  alert(person1.name); //"Greg" ?from instance
  alert(person2.name); //"Nicholas" ?from prototype
  
  delete person1.name;
  alert(person1.name); //"Nicholas" - from the prototype

6. hasOwnProperty method

This method can detect whether a property exists in the instance or in the prototype! hasOwnProperty is inherited from Object and will return true as long as the given property exists in the object instance.

 function Person(){
    }
    
    Person.prototype.name = "Nicholas";
    Person.prototype.age = 29;
    Person.prototype.job = "Software Engineer";
    Person.prototype.sayName = function(){
      alert(this.name);
    };
    
    var person1 = new Person();
    var person2 = new Person();
    
    alert(person1.hasOwnProperty("name")); //false
    alert("name" in person1); //true
    
    person1.name = "Greg";
    alert(person1.name);  //"Greg" ?from instance
    alert(person1.hasOwnProperty("name")); //true
    alert("name" in person1); //true
    
    alert(person2.name);  //"Nicholas" ?from prototype
    alert(person2.hasOwnProperty("name")); //false
    alert("name" in person2); //true
    
    delete person1.name;
    alert(person1.name);  //"Nicholas" - from the prototype
    alert(person1.hasOwnProperty("name")); //false
    alert("name" in person1); //true

7. Object.keys() enumerable property method

This method receives an object as a parameter and returns a string array containing all enumerable properties

 function Person(){
    }
    
    Person.prototype.name = "Nicholas";
    Person.prototype.age = 29;
    Person.prototype.job = "Software Engineer";
    Person.prototype.sayName = function(){
      alert(this.name);
    };
    
    var keys = Object.keys(Person.prototype);
    alert(keys);  //"name,age,job,sayName"
如果想得到所有实例的属性,无论它是否可以枚举都可以使用这个方法来获取
 function Person(){
    }
    
    Person.prototype.name = "Nicholas";
    Person.prototype.age = 29;
    Person.prototype.job = "Software Engineer";
    Person.prototype.sayName = function(){
      alert(this.name);
    };
    
    var keys = Object.getOwnPropertyNames(Person.prototype);
    alert(keys);  //"constructor,name,age,job,sayName"

This method is only supported by higher version browsers

8. Simple prototype writing method

 function Person(){
    }
    
    Person.prototype = {
      name : "Nicholas",
      age : 29,
      job: "Software Engineer",
      sayName : function () {
        alert(this.name);
      }
    };

    var friend = new Person();
    
    alert(friend instanceof Object); //true
    alert(friend instanceof Person); //true
    alert(friend.constructor == Person); //false
    alert(friend.constructor == Object); //true

Rewriting the prototype is equivalent to overwriting the default prototype method, then the same construction method will also be rewritten, and the rewritten construction method points to the Object object! Instead of the original object Person

If you still want to point to the previous constructor, you can specify it explicitly

 function Person(){
    }
    
    Person.prototype = {
      constructor : Person,
      name : "Nicholas",
      age : 29,
      job: "Software Engineer",
      sayName : function () {
        alert(this.name);
      }
    };

    var friend = new Person();
    
    alert(friend instanceof Object); //true
    alert(friend instanceof Person); //true
    alert(friend.constructor == Person); //true
    alert(friend.constructor == Object); //false

9. Dynamic addition of prototype methods

function Person(){
    }
    
    Person.prototype = {
      constructor: Person,
      name : "Nicholas",
      age : 29,
      job : "Software Engineer",
      sayName : function () {
        alert(this.name);
      }
    };
    
    var friend = new Person();
    
    Person.prototype.sayHi = function(){
      alert("hi");
    };
    
    friend.sayHi();  //"hi" ?works!

10. Prototype methods of native objects

alert(typeof Array.prototype.sort);     //"function"
    alert(typeof String.prototype.substring);  //"function"

    String.prototype.startsWith = function (text) {//修改原生对象的原型方法
      return this.indexOf(text) == 0;
    };
    
    var msg = "Hello world!";
    alert(msg.startsWith("Hello"));  //true

11. Create objects using a combination of constructors and prototype patterns

//构造函数模式
function Person(name, age, job){
      this.name = name;
      this.age = age;
      this.job = job;
      this.friends = ["Shelby", "Court"];
    }
    //原型模式
    Person.prototype = {
      constructor: Person,
      sayName : function () {
        alert(this.name);
      }
    };
    
    var person1 = new Person("Nicholas", 29, "Software Engineer");
    var person2 = new Person("Greg", 27, "Doctor");
    
    person1.friends.push("Van");
    
    alert(person1.friends);  //"Shelby,Court,Van"
    alert(person2.friends);  //"Shelby,Court"
    alert(person1.friends === person2.friends); //false
    alert(person1.sayName === person2.sayName); //true

12. Dynamic prototype mode

function Person(name, age, job){
    
      //properties
      this.name = name;
      this.age = age;
      this.job = job;
      
      //methods
      if (typeof this.sayName != "function"){
      
        Person.prototype.sayName = function(){
          alert(this.name);
        };
        
      }
    }

    var friend = new Person("Nicholas", 29, "Software Engineer");
    friend.sayName();

13. Parasitic constructor pattern

 function Person(name, age, job){
var o = new Object();//依赖全局对象初始化一个对象,然后再返回这个对象
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
}; 
return o;
}

var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName(); //"Nicholas"

function SpecialArray(){ 

//create the array
var values = new Array();

//add the values
values.push.apply(values, arguments);

//assign the method
values.toPipedString = function(){
return this.join("|");
};

//return it
return values; 
}

var colors = new SpecialArray("red", "blue", "green");
alert(colors.toPipedString()); //"red|blue|green"

alert(colors instanceof SpecialArray);

A little explanation for the appeal method, because it relies on the outer object to create a new object, it cannot rely on the instanceof method to determine the source of properties and methods! It actually has nothing to do with the constructor!

14. Safe constructor pattern

 function Person(name, age, job){
      var o = new Object();
      o.sayName = function(){
        alert(name);
      };  
      return o;
    }
    
    var friend = Person("Nicholas", 29, "Software Engineer");
    friend.sayName(); //"Nicholas"

This method does not rely on any new this keyword! If you want to access the methods and properties of an object, you can only get them through the methods that the object has defined!

15. Inheritance
Javascript implements inheritance through the prototype chain

function SuperType(){
      this.property = true;//定义一个属性
    }
    
    SuperType.prototype.getSuperValue = function(){//定义的原型方法
      return this.property;
    };
    
    function SubType(){
      this.subproperty = false;
    }
    
    //inherit from SuperType
    SubType.prototype = new SuperType();
    
    SubType.prototype.getSubValue = function (){
      return this.subproperty;
    };
    
    var instance = new SubType();
    alert(instance.getSuperValue());  //true
    
    alert(instance instanceof Object);   //true
    alert(instance instanceof SuperType);  //true
    alert(instance instanceof SubType);   //true

    alert(Object.prototype.isPrototypeOf(instance));  //true
    alert(SuperType.prototype.isPrototypeOf(instance)); //true
    alert(SubType.prototype.isPrototypeOf(instance));  //true
SubType继承SuperType的方法和属性,因此当instance可以直接调用SuperType的方法!
 function SuperType(){
      this.property = true;
    }
    
    SuperType.prototype.getSuperValue = function(){
      return this.property;
    };
    
    function SubType(){
      this.subproperty = false;
    }
    
    //inherit from SuperType
    SubType.prototype = new SuperType();
    
    //new method
    SubType.prototype.getSubValue = function (){
      return this.subproperty;
    };
    
    //override existing method
    SubType.prototype.getSuperValue = function (){
      return false;
    };
    
    var instance = new SubType();
    alert(instance.getSuperValue());  //false

The above example shows that the overridden prototype will overwrite the previously inherited prototype, and the final result returned is often not the expected effect

 function SuperType(){
      this.property = true;
    }
    
    SuperType.prototype.getSuperValue = function(){
      return this.property;
    };
    
    function SubType(){
      this.subproperty = false;
    }
    
    //inherit from SuperType
    SubType.prototype = new SuperType();
    
    //使用字面量添加的方法导致上面的方法失效了
    SubType.prototype = {
      getSubValue : function (){
        return this.subproperty;
      },
    
      someOtherMethod : function (){
        return false;
      }
    }; 
    
    var instance = new SubType();
    console.log(instance);
    alert(instance.getSuperValue());  //error!

The following example also illustrates the risks of rewriting prototypes

 function SuperType(){
      this.colors = ["red", "blue", "green"];
    }

    function SubType(){      
    }
    
    //inherit from SuperType
    SubType.prototype = new SuperType();

    var instance1 = new SubType();
    instance1.colors.push("black");
    alert(instance1.colors);  //"red,blue,green,black"
    
    var instance2 = new SubType();
    alert(instance2.colors);  //"red,blue,green,black"

原型共享导致两个不同的对象调用的同一个数据
16、借用构造函数来实现继承

 function SuperType(){
      this.colors = ["red", "blue", "green"];
    }

    function SubType(){ 
      //inherit from SuperType
      SuperType.call(this);
    }

    var instance1 = new SubType();
    instance1.colors.push("black");
    alert(instance1.colors);  //"red,blue,green,black"
    
    var instance2 = new SubType();
    alert(instance2.colors);  //"red,blue,green"

传递参数

 function SuperType(name){
      this.name = name;
    }

    function SubType(){ 
      //inherit from SuperType passing in an argument
      SuperType.call(this, "Nicholas");
      
      //instance property
      this.age = 29;
    }

    var instance = new SubType();
    alert(instance.name);  //"Nicholas";
    alert(instance.age);   //29

17、组合继承方式

function SuperType(name){
      this.name = name;
      this.colors = ["red", "blue", "green"];
    }
    
    SuperType.prototype.sayName = function(){
      alert(this.name);
    };

    function SubType(name, age){ 
      SuperType.call(this, name);
      
      this.age = age;
    }

18、原型继承

 function object(o){
      function F(){}
      F.prototype = o;
      return new F();
    }
    
    var person = {
      name: "Nicholas",
      friends: ["Shelby", "Court", "Van"]
    };
    
    var anotherPerson = object(person);
    anotherPerson.name = "Greg";
    anotherPerson.friends.push("Rob");

19、寄生组合式继承

 function object(o){
      function F(){}
      F.prototype = o;
      return new F();
    }
  
    function inheritPrototype(subType, superType){
      var prototype = object(superType.prototype);  //create object
      prototype.constructor = subType;        //augment object
      subType.prototype = prototype;         //assign object
    }
                
    function SuperType(name){
      this.name = name;
      this.colors = ["red", "blue", "green"];
    }
    
    SuperType.prototype.sayName = function(){
      alert(this.name);
    };

    function SubType(name, age){ 
      SuperType.call(this, name);
      
      this.age = age;
    }

    inheritPrototype(SubType, SuperType);
    
    SubType.prototype.sayAge = function(){
      alert(this.age);
    };
    
    var instance1 = new SubType("Nicholas", 29);
    instance1.colors.push("black");
    alert(instance1.colors); //"red,blue,green,black"
    instance1.sayName();   //"Nicholas";
    instance1.sayAge();    //29
    
    
    var instance2 = new SubType("Greg", 27);
    alert(instance2.colors); //"red,blue,green"
    instance2.sayName();   //"Greg";
    instance2.sayAge();    //27

以上就是今天的javascript学习小结,之后每天还会继续更新,希望大家继续关注。

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Java面试常见问题与答案Java面试常见问题与答案Jun 16, 2023 am 08:52 AM

Java作为一门常见的编程语言,其在IT行业中有着广泛的应用,成为了许多公司招聘中的重要技能之一。在Java开发岗位的面试中,面试官往往会问及一些常见的Java问题,以此考察应聘者的Java编程水平。本文将列举几个常见的Java面试问题及其答案,供广大应聘者参考。什么是Java虚拟机?答:Java虚拟机(JVM)是一种虚拟的计算机,可以执行Java字节码。它

PHP的面向对象编程范式为项目管理和组织提供优势PHP的面向对象编程范式为项目管理和组织提供优势Sep 08, 2023 am 08:15 AM

PHP的面向对象编程范式为项目管理和组织提供优势随着互联网的飞速发展,各种规模的网站和应用程序如雨后春笋般涌现出来。为了满足日益增长的需求,并提高开发效率和可维护性,采用面向对象编程(Object-OrientedProgramming,简称OOP)的方法成为了现代软件开发的主流。在PHP这样的动态脚本语言中,OOP为项目管理和组织带来了许多优势,本文将介

面向对象编程和MySql:如何实现更优雅的代码面向对象编程和MySql:如何实现更优雅的代码Jun 16, 2023 am 08:03 AM

随着计算机应用的不断普及和发展,程序设计语言也不断演化和更新。面向对象编程语言在当今程序设计中占据了主导地位,而MySQL则是最流行的关系型数据库管理系统之一。如何在面向对象编程中结合使用MySQL实现更优雅的代码呢?一、面向对象编程的基本概念面向对象编程(ObjectOrientedProgramming,简称OOP)是一种编程思想,它强调对象的概念和

Java面向对象编程:封装、继承和多态Java面向对象编程:封装、继承和多态May 11, 2023 pm 07:51 PM

Java是一种面向对象编程语言,具备三个重要的特性:封装、继承和多态。这三个特性使得Java程序具有高度的可重用性、可维护性和可扩展性。在本文中,我们将介绍Java面向对象编程的三个重要特性。一、封装封装是面向对象编程的基础。它是指将数据和行为封装在一起,保护数据不被直接访问,而是通过类的接口进行访问。封装可以使得程序更加安全、可靠和易于维护。在Java中,

PHP面向对象编程中的访问者模式解析PHP面向对象编程中的访问者模式解析Aug 10, 2023 pm 01:33 PM

PHP面向对象编程中的访问者模式解析访问者模式是一种常用的设计模式,它可以分离数据结构和处理逻辑,使得同一个数据结构可以有不同的处理逻辑,而且可以在不修改数据结构的情况下增加新的处理逻辑。在PHP中,访问者模式可以帮助我们更好地组织代码,并提高代码的可维护性和可扩展性。本文将深入探讨PHP面向对象编程中的访问者模式,并通过示例代码进行解析。一、模式概述访问者

面向对象编程是什么意思面向对象编程是什么意思Jul 17, 2023 pm 01:56 PM

面向对象编程是一种编码设计,它使用数据来表示一组指令。它是一种具有对象概念的程序编程典范,同时也是一种程序开发的抽象方针。它由描述状态的属性和用来实现对象行为的方法组成,完成了从数据模型到处理模型的结合与统一。

理解PHP面向对象编程中的工厂模式理解PHP面向对象编程中的工厂模式Aug 10, 2023 am 10:37 AM

理解PHP面向对象编程中的工厂模式工厂模式是一种常用的设计模式,它用于创建对象的过程中将对象的创建和使用解耦。在PHP面向对象编程中,工厂模式可以帮助我们更好地管理对象的创建和生命周期。本文将通过代码示例来详细介绍PHP中的工厂模式。在PHP中,我们可以通过使用工厂模式来实现对象的创建和初始化过程,而不是直接使用new关键字。这样做的好处是,如果将来需要改变

解析PHP面向对象编程中的类属性和方法解析PHP面向对象编程中的类属性和方法Aug 12, 2023 pm 01:06 PM

解析PHP面向对象编程中的类属性和方法PHP是一种被广泛应用于Web开发的脚本语言,它支持面向对象编程(OOP)的特性。在PHP中,类是一种用来创建对象的蓝图或模板,而属性和方法则是类的核心部分。本文将深入解析PHP面向对象编程中的类属性和方法,并通过代码示例来加深理解。一、类属性类属性是指用于描述类的特有数据的变量。它们可以存储对象的状态和特征。在PHP中

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment