Skip to content

Commit

Permalink
added examples of Object.create()
Browse files Browse the repository at this point in the history
  • Loading branch information
@nitishkhobragade
nitishkhobragade committed Mar 31, 2024
1 parent 91a8962 commit aaae98b
Show file tree
Hide file tree
Showing 4 changed files with 160 additions and 4 deletions.
13 changes: 11 additions & 2 deletions ...objects/Object/copywithin()/example1.html → ...ects/Object/Object.create()/example1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,18 @@ <h3 class="question">Write Your JavaScript Code Here</h3>
<button id="copyButton">Copy Code</button>
</div>
<div class="editor-container">
<!-- your code editor starts here -->
<!-- your code editor starts here -->
<div id="editor"><!--Write Your Code in This div-->

const people = {
printIntroduction: function ()
{
console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
}
};
const me = Object.create(people);
me.name = "Marry"; // "name" is a property set on "me", but not on "person"
me.isHuman = true; // inherited properties can be overwritten
me.printIntroduction();
</div>
<!-- your code editor ends here -->
</div>
Expand Down
59 changes: 59 additions & 0 deletions javascript_objects/Object/Object.create()/example2.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example</title>
<meta name="description" content="An online JavaScript compiler made by Nitish Khobragade. Write, run, and copy your JavaScript code. The best online tool for JavaScript coding, with features such as syntax highlighting, code completion, and more.">
<meta name="author" content="Nitish Khobragade">
<meta name="keywords" content="JavaScript, compiler, online, Nitish Khobragade">
<!-- Add more relevant meta tags as needed -->

<!-- Google Search Console Verification (replace CONTENT with your verification code) -->
<!-- <meta name="google-site-verification" content="CONTENT"> -->

<!-- Open Graph Meta Tags (for better sharing on social media) -->
<meta property="og:title" content="FIND LARGEST NUMBER IN ARRAY">
<meta property="og:description" content="An online JavaScript compiler made by Nitish Khobragade. Write, run, and copy your JavaScript code.">
<!-- Add more Open Graph meta tags as needed -->
<link rel="stylesheet" href="../editor.css" />
</head>
<body>
<h3 class="question">Prototype-based Inheritance in JavaScript with Constructors using Object.create()</h3>
<div class="btn-container">
<button id="runBtn">Run</button>
<button id="copyButton">Copy Code</button>
</div>
<div class="editor-container">
<!-- your code editor starts here -->
<div id="editor"><!--Write Your Code in This div-->
function fruits() { // Defines a constructor function named "fruits"
this.name = 'franco'; // Creates a property "name" and assigns it the value 'franco' within the "fruits" constructor
}

function fun() { // Defines another constructor function named "fun"
fruits.call(this); // Calls the "fruits" constructor within the context of the current object (this), effectively setting its properties
}

fun.prototype = Object.create(fruits.prototype); // Creates a new object that inherits from the prototype of "fruits" and sets it as the prototype of "fun"

const app = new fun(); // Creates a new instance of the "fun" constructor and assigns it to the variable "app"

console.log(app.name); // Outputs the value of the "name" property of the "app" object, which is 'franco'

</div>
<!-- your code editor ends here -->
</div>
<div class="result-container">
<h3>Output:</h3>
<div id="result"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.7/ace.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/tern/0.12.0/tern.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.7/ext-language_tools.js"></script>
<script src="../editor.js"></script>


</body>
</html>
61 changes: 61 additions & 0 deletions javascript_objects/Object/Object.create()/example3.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example</title>
<meta name="description" content="An online JavaScript compiler made by Nitish Khobragade. Write, run, and copy your JavaScript code. The best online tool for JavaScript coding, with features such as syntax highlighting, code completion, and more.">
<meta name="author" content="Nitish Khobragade">
<meta name="keywords" content="JavaScript, compiler, online, Nitish Khobragade">
<!-- Add more relevant meta tags as needed -->

<!-- Google Search Console Verification (replace CONTENT with your verification code) -->
<!-- <meta name="google-site-verification" content="CONTENT"> -->

<!-- Open Graph Meta Tags (for better sharing on social media) -->
<meta property="og:title" content="FIND LARGEST NUMBER IN ARRAY">
<meta property="og:description" content="An online JavaScript compiler made by Nitish Khobragade. Write, run, and copy your JavaScript code.">
<!-- Add more Open Graph meta tags as needed -->
<link rel="stylesheet" href="../editor.css" />
</head>
<body>
<h3 class="question">Prototype-based Inheritance in JavaScript using the 'create' Method</h3>
<div class="btn-container">
<button id="runBtn">Run</button>
<button id="copyButton">Copy Code</button>
</div>
<div class="editor-container">
<!-- your code editor starts here -->
<div id="editor"><!--Write Your Code in This div-->
function fruits() { // Defines a constructor function named "fruits"
this.name = 'fruit'; // Creates a property "name" and assigns it the value 'fruit' within the "fruits" constructor
this.season = 'Winter'; // Creates a property "season" and assigns it the value 'Winter' within the "fruits" constructor
}

function apple() { // Defines another constructor function named "apple"
fruits.call(this); // Calls the "fruits" constructor within the context of the current object (this), effectively setting its properties
}

apple.prototype = Object.create(fruits.prototype); // Creates a new object that inherits from the prototype of "fruits" and sets it as the prototype of "apple"

const app = new apple(); // Creates a new instance of the "apple" constructor and assigns it to the variable "app"

console.log(app.name, app.season); // Outputs the value of the "name" and "season" properties of the "app" object, which are 'fruit' and 'Winter' respectively
console.log(app.season); // Outputs the value of the "season" property of the "app" object again, which is 'Winter'

</div>
<!-- your code editor ends here -->
</div>
<div class="result-container">
<h3>Output:</h3>
<div id="result"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.7/ace.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/tern/0.12.0/tern.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.7/ext-language_tools.js"></script>
<script src="../editor.js"></script>


</body>
</html>
31 changes: 29 additions & 2 deletions javascript_objects/Object/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,15 +59,15 @@
</div>
</header>
<!-- header ended -->
<!-- anchor tags for specific program -->
<!-- anchor tags for specific program -->
<section class="text-gray-600 body-font">
<div class="container px-5 py-8 mx-auto">
<div class="flex flex-col text-center w-full mb-10">
<h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">Object.assign()</h1>
<p> This method is used to copy enumerable and own properties from a source object to a target object</p>
<p class="text-gray-900">Syntax - Object.assign(target, sources) </p>
</div>
<div class="flex flex-wrap -m-4">
<div class="flex flex-wrap -m-8">
<ul class="flex flex-wrap w-full justify-center">
<li class="p-2">
<a href="./Object.assign()/example1.html" class="text-indigo-500">Example 1</a>
Expand All @@ -84,6 +84,33 @@ <h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">Objec
</div>
</div>
</section>
<!-- anchor tags for specific program ended -->

<!-- anchor tags for specific program -->
<section class="text-gray-600 body-font">
<div class="container px-5 py-8 mx-auto">
<div class="flex flex-col text-center w-full mb-10">
<h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">Object.create()</h1>
<p>The Object.create() method is used to create a new object with the specified prototype object and properties. We can create an object without a prototype by Object.creates (null).</p>
<p class="text-gray-900">Syntax- Object.create(prototype[, propertiesObject]) </p>
</div>
<div class="flex flex-wrap -m-8">
<ul class="flex flex-wrap w-full justify-center">
<li class="p-2">
<a href="./Object.create()/example1.html" class="text-indigo-500">Example 1</a>
</li>
<li class="p-2">
<a href="./Object.create()/example2.html" class="text-indigo-500">Example 2</a>
</li>

<li class="p-2">
<a href="./Object.create()/example3.html" class="text-indigo-500">Example 3</a>
</li>
<!-- Add more anchor tags as needed -->
</ul>
</div>
</div>
</section>
<!-- anchor tags for specific program ended -->

<!-- anchor tags for specific program -->
Expand Down

0 comments on commit aaae98b

Please sign in to comment.