Front-end Engineer-JavaScript Special Exercise

1. What is JavaScript

  • JavaScript ("JS" for short) is a lightweight, interpreted or just-in-time compiled programming language with function first. Although it is famous as a scripting language for developing Web pages, it is also used in many non-browser environments. JavaScript is based on prototype programming, a multi-paradigm dynamic scripting language, and supports object-oriented, imperative, declarative, functional programming paradigm.

2. What is prototype and prototype chain, and what is the difference

  • First, the prototype (prototpe): is specific to the function
  • Second, the prototype chain ([[prototype]]): all data has
  • 3. When the subclass attribute prototype (prototype) has no data, the attribute data of the prototype chain ([[prototype]]) will be mobilized until null is found. If there are no two, an error will be reported.
  • Fourth, hasOwnProperty(): You can find out the private properties that only subclasses have

Code:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<h2>原型与原型链</h2>
</body>
<script>
	// 1、原型:prototype =>函数所特有的
	// 2、原型链:[[prototype]] =>任何数据都有原型链
	// 3、创建函数,绑定2个属性和1个方法
	function Person() {
     
      }
	Person.prototype.name = 'jasmine'
	Person.prototype.age = 18
	Person.prototype.getAge = function () {
     
     
		console.log(this.age)
	}
	// 4、创建一个Person实例对象,原型(prototype)的继承关系:继承属性和方法,进行调用
	let person1 = new Person()
	console.log(person1.name)

	// 5、从当前实例属性原型(prototype)去查找,如果找了就返回(age=20),否则顺着原型链[[prototype]]一层一层往上找(age=18)
	person1.age = 20
	person1.getAge()

	// 6、直到找到null为止,如果为null都没找到,则会报错
	//person1.demo()

	// 7、hasOwnProperty()=>仅子类有的私有属性,打印出来
	person1.demo = 'demo'
	let item;
	for (item in person1) {
     
     
		//
		if (person1.hasOwnProperty(item)) {
     
     
			console.log(item)
		}
	}
</script>
</html>

Code Analysis:
insert image description here


Guess you like

Origin blog.csdn.net/weixin_45065754/article/details/123472890